1.checkbox-wrapper-11 {
2  --text: #414856;
3  --check: #4F29F0;
4  --disabled: #C3C8DE;
5  --border-radius: 10px;
6  border-radius: var(--border-radius);
7  position: relative;
8  padding: 5px;
9  display: grid;
10  grid-template-columns: 30px auto;
11  align-items: center;
12}
13
14.checkbox-wrapper-11 label {
15  color: var(--text);
16  position: relative;
17  cursor: pointer;
18  display: grid;
19  align-items: center;
20  width: -webkit-fit-content;
21  width: -moz-fit-content;
22  width: fit-content;
23  transition: color 0.3s ease;
24}
25
26.checkbox-wrapper-11 label::before,
27  .checkbox-wrapper-11 label::after {
28  content: "";
29  position: absolute;
30}
31
32.checkbox-wrapper-11 label::before {
33  height: 2px;
34  width: 8px;
35  left: -27px;
36  background: var(--check);
37  border-radius: 2px;
38  transition: background 0.3s ease;
39}
40
41.checkbox-wrapper-11 label:after {
42  height: 4px;
43  width: 4px;
44  top: 8px;
45  left: -25px;
46  border-radius: 50%;
47}
48
49.checkbox-wrapper-11 input[type=checkbox] {
50  -webkit-appearance: none;
51  -moz-appearance: none;
52  position: relative;
53  height: 15px;
54  width: 15px;
55  outline: none;
56  border: 0;
57  margin: 0 15px 0 0;
58  cursor: pointer;
59  background: var(--background);
60  display: grid;
61  align-items: center;
62}
63
64.checkbox-wrapper-11 input[type=checkbox]::before, .checkbox-wrapper-11 input[type=checkbox]::after {
65  content: "";
66  position: absolute;
67  height: 2px;
68  top: auto;
69  background: var(--check);
70  border-radius: 2px;
71}
72
73.checkbox-wrapper-11 input[type=checkbox]::before {
74  width: 0px;
75  right: 60%;
76  transform-origin: right bottom;
77}
78
79.checkbox-wrapper-11 input[type=checkbox]::after {
80  width: 0px;
81  left: 40%;
82  transform-origin: left bottom;
83}
84
85.checkbox-wrapper-11 input[type=checkbox]:checked::before {
86  -webkit-animation: check-01-11 0.4s ease forwards;
87  animation: check-01-11 0.4s ease forwards;
88}
89
90.checkbox-wrapper-11 input[type=checkbox]:checked::after {
91  -webkit-animation: check-02-11 0.4s ease forwards;
92  animation: check-02-11 0.4s ease forwards;
93}
94
95.checkbox-wrapper-11 input[type=checkbox]:checked + label {
96  color: var(--disabled);
97  -webkit-animation: move-11 0.3s ease 0.1s forwards;
98  animation: move-11 0.3s ease 0.1s forwards;
99}
100
101.checkbox-wrapper-11 input[type=checkbox]:checked + label::before {
102  background: var(--disabled);
103  -webkit-animation: slice-11 0.4s ease forwards;
104  animation: slice-11 0.4s ease forwards;
105}
106
107.checkbox-wrapper-11 input[type=checkbox]:checked + label::after {
108  -webkit-animation: firework-11 0.5s ease forwards 0.1s;
109  animation: firework-11 0.5s ease forwards 0.1s;
110}
111
112@-webkit-keyframes move-11 {
113  50% {
114    padding-left: 8px;
115    padding-right: 0px;
116  }
117
118  100% {
119    padding-right: 4px;
120  }
121}
122
123@keyframes move-11 {
124  50% {
125    padding-left: 8px;
126    padding-right: 0px;
127  }
128
129  100% {
130    padding-right: 4px;
131  }
132}
133
134@-webkit-keyframes slice-11 {
135  60% {
136    width: 100%;
137    left: 4px;
138  }
139
140  100% {
141    width: 100%;
142    left: -2px;
143    padding-left: 0;
144  }
145}
146
147@keyframes slice-11 {
148  60% {
149    width: 100%;
150    left: 4px;
151  }
152
153  100% {
154    width: 100%;
155    left: -2px;
156    padding-left: 0;
157  }
158}
159
160@-webkit-keyframes check-01-11 {
161  0% {
162    width: 4px;
163    top: auto;
164    transform: rotate(0);
165  }
166
167  50% {
168    width: 0px;
169    top: auto;
170    transform: rotate(0);
171  }
172
173  51% {
174    width: 0px;
175    top: 8px;
176    transform: rotate(45deg);
177  }
178
179  100% {
180    width: 5px;
181    top: 8px;
182    transform: rotate(45deg);
183  }
184}
185
186@keyframes check-01-11 {
187  0% {
188    width: 4px;
189    top: auto;
190    transform: rotate(0);
191  }
192
193  50% {
194    width: 0px;
195    top: auto;
196    transform: rotate(0);
197  }
198
199  51% {
200    width: 0px;
201    top: 8px;
202    transform: rotate(45deg);
203  }
204
205  100% {
206    width: 5px;
207    top: 8px;
208    transform: rotate(45deg);
209  }
210}
211
212@-webkit-keyframes check-02-11 {
213  0% {
214    width: 4px;
215    top: auto;
216    transform: rotate(0);
217  }
218
219  50% {
220    width: 0px;
221    top: auto;
222    transform: rotate(0);
223  }
224
225  51% {
226    width: 0px;
227    top: 8px;
228    transform: rotate(-45deg);
229  }
230
231  100% {
232    width: 10px;
233    top: 8px;
234    transform: rotate(-45deg);
235  }
236}
237
238@keyframes check-02-11 {
239  0% {
240    width: 4px;
241    top: auto;
242    transform: rotate(0);
243  }
244
245  50% {
246    width: 0px;
247    top: auto;
248    transform: rotate(0);
249  }
250
251  51% {
252    width: 0px;
253    top: 8px;
254    transform: rotate(-45deg);
255  }
256
257  100% {
258    width: 10px;
259    top: 8px;
260    transform: rotate(-45deg);
261  }
262}
263
264@-webkit-keyframes firework-11 {
265  0% {
266    opacity: 1;
267    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
268  }
269
270  30% {
271    opacity: 1;
272  }
273
274  100% {
275    opacity: 0;
276    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
277  }
278}
279
280@keyframes firework-11 {
281  0% {
282    opacity: 1;
283    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
284  }
285
286  30% {
287    opacity: 1;
288  }
289
290  100% {
291    opacity: 0;
292    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
293  }
294}