1.plus-minus {
2  --primary: #1E2235;
3  --secondary: #FAFBFF;
4  --duration: .5s;
5  -webkit-appearance: none;
6  -moz-appearance: none;
7  -webkit-tap-highlight-color: transparent;
8  -webkit-mask-image: -webkit-radial-gradient(white, black);
9  outline: none;
10  cursor: pointer;
11  position: relative;
12  overflow: hidden;
13  transform-style: preserve-3d;
14  perspective: 240px;
15  border-radius: 50%;
16  width: 36px;
17  height: 36px;
18  border: 4px solid var(--primary);
19  background-size: 300% 300%;
20  transition: transform 0.3s;
21  transform: scale(var(--scale, 1)) translateZ(0);
22  -webkit-animation: var(--name, unchecked) var(--duration) ease forwards;
23  animation: var(--name, unchecked) var(--duration) ease forwards;
24}
25
26.plus-minus:before, .plus-minus:after {
27  content: "";
28  position: absolute;
29  width: 16px;
30  height: var(--height, 16px);
31  left: 6px;
32  top: var(--top, 6px);
33  background: var(--background, var(--primary));
34  -webkit-animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
35  animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards;
36}
37
38.plus-minus:before {
39  -webkit-clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);
40  clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px);
41}
42
43.plus-minus:after {
44  --height: 4px;
45  --top: 12px;
46  --background: var(--secondary);
47  --name-icon-b: var(--name-icon-a, checked-icon);
48}
49
50.plus-minus:active {
51  --scale: .95;
52}
53
54.plus-minus:checked {
55  --name: checked;
56  --name-icon-b: checked-icon;
57  --name-icon-a: unchecked-icon;
58}
59
60@keyframes checked-icon {
61  from {
62    transform: translateZ(12px);
63  }
64
65  to {
66    transform: translateX(16px) rotateY(90deg) translateZ(12px);
67  }
68}
69
70@keyframes unchecked-icon {
71  from {
72    transform: translateX(-16px) rotateY(-90deg) translateZ(12px);
73  }
74
75  to {
76    transform: translateZ(12px);
77  }
78}
79
80@keyframes checked {
81  from {
82    background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
83    background-position: 100% 50%;
84  }
85
86  to {
87    background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%);
88    background-position: 50% 50%;
89  }
90}
91
92@keyframes unchecked {
93  from {
94    background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
95    background-position: 100% 50%;
96  }
97
98  to {
99    background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%);
100    background-position: 50% 50%;
101  }
102}