Switch by Galahhad

#e8e8e8

1/* REMASTERED */
2/* RTX-ON */
3/* completely redone toggle and droid */
4
5.bb8-toggle {
6  --toggle-size: 16px;
7  /* finally I removed the scale now everything depends on the font-size */
8  /* --margin-top-for-head: 1.75em; */
9  /* it's just in case 👆 */
10  --toggle-width: 10.625em;
11  --toggle-height: 5.625em;
12  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
13  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
14    no-repeat;
15  --bb8-diameter: 4.375em;
16  --radius: 99em;
17  --transition: 0.4s;
18  --accent: #de7d2f;
19  --bb8-bg: #fff;
20}
21
22.bb8-toggle,
23.bb8-toggle *,
24.bb8-toggle *::before,
25.bb8-toggle *::after {
26  -webkit-box-sizing: border-box;
27  box-sizing: border-box;
28}
29
30.bb8-toggle {
31  cursor: pointer;
32  margin-top: var(--margin-top-for-head);
33  font-size: var(--toggle-size);
34}
35
36.bb8-toggle__checkbox {
37  -webkit-appearance: none;
38  -moz-appearance: none;
39  appearance: none;
40  display: none;
41}
42
43.bb8-toggle__container {
44  width: var(--toggle-width);
45  height: var(--toggle-height);
46  background: var(--toggle-bg);
47  background-size: 100% 11.25em;
48  background-position-y: -5.625em;
49  border-radius: var(--radius);
50  position: relative;
51  -webkit-transition: var(--transition);
52  -o-transition: var(--transition);
53  transition: var(--transition);
54}
55
56.bb8 {
57  display: -webkit-box;
58  display: -ms-flexbox;
59  display: flex;
60  -webkit-box-orient: vertical;
61  -webkit-box-direction: normal;
62  -ms-flex-direction: column;
63  flex-direction: column;
64  -webkit-box-align: center;
65  -ms-flex-align: center;
66  align-items: center;
67  position: absolute;
68  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
69  left: var(--toggle-offset);
70  -webkit-transition: var(--transition);
71  -o-transition: var(--transition);
72  transition: var(--transition);
73  z-index: 2;
74}
75
76.bb8__head-container {
77  position: relative;
78  -webkit-transition: var(--transition);
79  -o-transition: var(--transition);
80  transition: var(--transition);
81  z-index: 2;
82  -webkit-transform-origin: 1.25em 3.75em;
83  -ms-transform-origin: 1.25em 3.75em;
84  transform-origin: 1.25em 3.75em;
85}
86
87.bb8__head {
88  overflow: hidden;
89  margin-bottom: -0.188em;
90  width: 2.5em;
91  height: 1.688em;
92  background: -o-linear-gradient(
93      transparent 0.063em,
94      dimgray 0.063em 0.313em,
95      transparent 0.313em 0.375em,
96      var(--accent) 0.375em 0.5em,
97      transparent 0.5em 1.313em,
98      silver 1.313em 1.438em,
99      transparent 1.438em
100    ),
101    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
102          1.25em),
103    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
104          1.25em),
105    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
106  background: -o-linear-gradient(
107      transparent 0.063em,
108      dimgray 0.063em 0.313em,
109      transparent 0.313em 0.375em,
110      var(--accent) 0.375em 0.5em,
111      transparent 0.5em 1.313em,
112      silver 1.313em 1.438em,
113      transparent 1.438em
114    ),
115    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
116          1.25em),
117    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
118          1.25em),
119    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
120  background: -o-linear-gradient(
121      transparent 0.063em,
122      dimgray 0.063em 0.313em,
123      transparent 0.313em 0.375em,
124      var(--accent) 0.375em 0.5em,
125      transparent 0.5em 1.313em,
126      silver 1.313em 1.438em,
127      transparent 1.438em
128    ),
129    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
130          1.25em),
131    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
132          1.25em),
133    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
134  background: -o-linear-gradient(
135      transparent 0.063em,
136      dimgray 0.063em 0.313em,
137      transparent 0.313em 0.375em,
138      var(--accent) 0.375em 0.5em,
139      transparent 0.5em 1.313em,
140      silver 1.313em 1.438em,
141      transparent 1.438em
142    ),
143    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
144          1.25em),
145    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
146          1.25em),
147    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
148  background: linear-gradient(
149      transparent 0.063em,
150      dimgray 0.063em 0.313em,
151      transparent 0.313em 0.375em,
152      var(--accent) 0.375em 0.5em,
153      transparent 0.5em 1.313em,
154      silver 1.313em 1.438em,
155      transparent 1.438em
156    ),
157    linear-gradient(
158      45deg,
159      transparent 0.188em,
160      var(--bb8-bg) 0.188em 1.25em,
161      transparent 1.25em
162    ),
163    linear-gradient(
164      -45deg,
165      transparent 0.188em,
166      var(--bb8-bg) 0.188em 1.25em,
167      transparent 1.25em
168    ),
169    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
170  border-radius: var(--radius) var(--radius) 0 0;
171  position: relative;
172  z-index: 1;
173  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
174  filter: drop-shadow(0 0.063em 0.125em gray);
175}
176
177.bb8__head::before {
178  content: "";
179  position: absolute;
180  width: 0.563em;
181  height: 0.563em;
182  background: -o-radial-gradient(
183      0.25em 0.375em,
184      0.125em circle,
185      red,
186      transparent
187    ),
188    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
189          100%),
190    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
191  background: -o-radial-gradient(
192      0.25em 0.375em,
193      0.125em circle,
194      red,
195      transparent
196    ),
197    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
198          100%),
199    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
200  background: -o-radial-gradient(
201      0.25em 0.375em,
202      0.125em circle,
203      red,
204      transparent
205    ),
206    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
207          100%),
208    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
209  background: -o-radial-gradient(
210      0.25em 0.375em,
211      0.125em circle,
212      red,
213      transparent
214    ),
215    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
216          100%),
217    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
218  background: radial-gradient(
219      0.125em circle at 0.25em 0.375em,
220      red,
221      transparent
222    ),
223    radial-gradient(
224      0.063em circle at 0.375em 0.188em,
225      var(--bb8-bg) 50%,
226      transparent 100%
227    ),
228    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
229  border-radius: var(--radius);
230  top: 0.413em;
231  left: 50%;
232  -webkit-transform: translate(-50%);
233  -ms-transform: translate(-50%);
234  transform: translate(-50%);
235  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
236    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
237  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
238    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
239  z-index: 1;
240  -webkit-transition: var(--transition);
241  -o-transition: var(--transition);
242  transition: var(--transition);
243}
244
245.bb8__head::after {
246  content: "";
247  position: absolute;
248  bottom: 0.375em;
249  left: 0;
250  width: 100%;
251  height: 0.188em;
252  background: -o-linear-gradient(
253    left,
254    var(--accent) 0.125em,
255    transparent 0.125em 0.188em,
256    var(--accent) 0.188em 0.313em,
257    transparent 0.313em 0.375em,
258    var(--accent) 0.375em 0.938em,
259    transparent 0.938em 1em,
260    var(--accent) 1em 1.125em,
261    transparent 1.125em 1.875em,
262    var(--accent) 1.875em 2em,
263    transparent 2em 2.063em,
264    var(--accent) 2.063em 2.25em,
265    transparent 2.25em 2.313em,
266    var(--accent) 2.313em 2.375em,
267    transparent 2.375em 2.438em,
268    var(--accent) 2.438em
269  );
270  background: -webkit-gradient(
271    linear,
272    left top,
273    right top,
274    color-stop(0.125em, var(--accent)),
275    color-stop(0.125em, transparent),
276    color-stop(0.188em, var(--accent)),
277    color-stop(0.313em, transparent),
278    color-stop(0.375em, var(--accent)),
279    color-stop(0.938em, transparent),
280    color-stop(1em, var(--accent)),
281    color-stop(1.125em, transparent),
282    color-stop(1.875em, var(--accent)),
283    color-stop(2em, transparent),
284    color-stop(2.063em, var(--accent)),
285    color-stop(2.25em, transparent),
286    color-stop(2.313em, var(--accent)),
287    color-stop(2.375em, transparent),
288    color-stop(2.438em, var(--accent))
289  );
290  background: linear-gradient(
291    to right,
292    var(--accent) 0.125em,
293    transparent 0.125em 0.188em,
294    var(--accent) 0.188em 0.313em,
295    transparent 0.313em 0.375em,
296    var(--accent) 0.375em 0.938em,
297    transparent 0.938em 1em,
298    var(--accent) 1em 1.125em,
299    transparent 1.125em 1.875em,
300    var(--accent) 1.875em 2em,
301    transparent 2em 2.063em,
302    var(--accent) 2.063em 2.25em,
303    transparent 2.25em 2.313em,
304    var(--accent) 2.313em 2.375em,
305    transparent 2.375em 2.438em,
306    var(--accent) 2.438em
307  );
308  -webkit-transition: var(--transition);
309  -o-transition: var(--transition);
310  transition: var(--transition);
311}
312
313.bb8__antenna {
314  position: absolute;
315  -webkit-transform: translateY(-90%);
316  -ms-transform: translateY(-90%);
317  transform: translateY(-90%);
318  width: 0.059em;
319  border-radius: var(--radius) var(--radius) 0 0;
320  -webkit-transition: var(--transition);
321  -o-transition: var(--transition);
322  transition: var(--transition);
323}
324
325.bb8__antenna:nth-child(1) {
326  height: 0.938em;
327  right: 0.938em;
328  background: -o-linear-gradient(#000 0.188em, silver 0.188em);
329  background: -webkit-gradient(
330    linear,
331    left top,
332    left bottom,
333    color-stop(0.188em, #000),
334    color-stop(0.188em, silver)
335  );
336  background: linear-gradient(#000 0.188em, silver 0.188em);
337}
338
339.bb8__antenna:nth-child(2) {
340  height: 0.375em;
341  left: 50%;
342  -webkit-transform: translate(-50%, -90%);
343  -ms-transform: translate(-50%, -90%);
344  transform: translate(-50%, -90%);
345  background: silver;
346}
347
348.bb8__body {
349  width: 4.375em;
350  height: 4.375em;
351  background: var(--bb8-bg);
352  border-radius: var(--radius);
353  position: relative;
354  overflow: hidden;
355  -webkit-transition: var(--transition);
356  -o-transition: var(--transition);
357  transition: var(--transition);
358  z-index: 1;
359  -webkit-transform: rotate(45deg);
360  -ms-transform: rotate(45deg);
361  transform: rotate(45deg);
362  background: -webkit-gradient(
363      linear,
364      right top,
365      left top,
366      color-stop(4%, var(--bb8-bg)),
367      color-stop(4%, var(--accent)),
368      color-stop(10%, transparent),
369      color-stop(90%, var(--accent)),
370      color-stop(96%, var(--bb8-bg))
371    ),
372    -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))),
373    -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)),
374    -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent));
375  background: -o-linear-gradient(
376      right,
377      var(--bb8-bg) 4%,
378      var(--accent) 4% 10%,
379      transparent 10% 90%,
380      var(--accent) 90% 96%,
381      var(--bb8-bg) 96%
382    ),
383    -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10%
384          90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
385    -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent
386          2.188em),
387    -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent
388          2.188em);
389  background: linear-gradient(
390      -90deg,
391      var(--bb8-bg) 4%,
392      var(--accent) 4% 10%,
393      transparent 10% 90%,
394      var(--accent) 90% 96%,
395      var(--bb8-bg) 96%
396    ),
397    linear-gradient(
398      var(--bb8-bg) 4%,
399      var(--accent) 4% 10%,
400      transparent 10% 90%,
401      var(--accent) 90% 96%,
402      var(--bb8-bg) 96%
403    ),
404    linear-gradient(
405      to right,
406      transparent 2.156em,
407      silver 2.156em 2.219em,
408      transparent 2.188em
409    ),
410    linear-gradient(
411      transparent 2.156em,
412      silver 2.156em 2.219em,
413      transparent 2.188em
414    );
415  background-color: var(--bb8-bg);
416}
417
418.bb8__body::after {
419  content: "";
420  bottom: 1.5em;
421  left: 0.563em;
422  position: absolute;
423  width: 0.188em;
424  height: 0.188em;
425  background: rgb(236, 236, 236);
426  color: rgb(236, 236, 236);
427  border-radius: 50%;
428  -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,
429    2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
430  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
431    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
432}
433
434.bb8__body::before {
435  content: "";
436  width: 2.625em;
437  height: 2.625em;
438  position: absolute;
439  border-radius: 50%;
440  z-index: 0.1;
441  overflow: hidden;
442  top: 50%;
443  left: 50%;
444  -webkit-transform: translate(-50%, -50%);
445  -ms-transform: translate(-50%, -50%);
446  transform: translate(-50%, -50%);
447  border: 0.313em solid var(--accent);
448  background: -o-radial-gradient(
449      center,
450      1em circle,
451      rgb(236, 236, 236) 50%,
452      transparent 51%
453    ),
454    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
455    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
456          58%),
457    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
458          58%);
459  background: -o-radial-gradient(
460      center,
461      1em circle,
462      rgb(236, 236, 236) 50%,
463      transparent 51%
464    ),
465    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
466    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
467          58%),
468    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
469          58%);
470  background: radial-gradient(
471      1em circle at center,
472      rgb(236, 236, 236) 50%,
473      transparent 51%
474    ),
475    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
476    -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)),
477    -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg)));
478  background: radial-gradient(
479      1em circle at center,
480      rgb(236, 236, 236) 50%,
481      transparent 51%
482    ),
483    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
484    linear-gradient(
485      -90deg,
486      transparent 42%,
487      var(--accent) 42% 58%,
488      transparent 58%
489    ),
490    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
491}
492
493.artificial__hidden {
494  position: absolute;
495  border-radius: inherit;
496  inset: 0;
497  pointer-events: none;
498  overflow: hidden;
499}
500
501.bb8__shadow {
502  content: "";
503  width: var(--bb8-diameter);
504  height: 20%;
505  border-radius: 50%;
506  background: #3a271c;
507  -webkit-box-shadow: 0.313em 0 3.125em #3a271c;
508  box-shadow: 0.313em 0 3.125em #3a271c;
509  opacity: 0.25;
510  position: absolute;
511  bottom: 0;
512  left: calc(var(--toggle-offset) - 0.938em);
513  -webkit-transition: var(--transition);
514  -o-transition: var(--transition);
515  transition: var(--transition);
516  -webkit-transform: skew(-70deg);
517  -ms-transform: skew(-70deg);
518  transform: skew(-70deg);
519  z-index: 1;
520}
521
522.bb8-toggle__scenery {
523  width: 100%;
524  height: 100%;
525  pointer-events: none;
526  overflow: hidden;
527  position: relative;
528  border-radius: inherit;
529}
530
531.bb8-toggle__scenery::before {
532  content: "";
533  position: absolute;
534  width: 100%;
535  height: 30%;
536  bottom: 0;
537  background: #b18d71;
538  z-index: 1;
539}
540
541.bb8-toggle__cloud {
542  z-index: 1;
543  position: absolute;
544  border-radius: 50%;
545}
546
547.bb8-toggle__cloud:nth-last-child(1) {
548  width: 0.875em;
549  height: 0.625em;
550  -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
551    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
552  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
553    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
554  right: 1.875em;
555  top: 2.813em;
556  background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae);
557  background: -webkit-gradient(
558    linear,
559    left bottom,
560    right top,
561    from(#ffffffae),
562    to(#ffffffae)
563  );
564  background: linear-gradient(to top right, #ffffffae, #ffffffae);
565  -webkit-transition: var(--transition);
566  -o-transition: var(--transition);
567  transition: var(--transition);
568}
569
570.bb8-toggle__cloud:nth-last-child(2) {
571  top: 0.625em;
572  right: 4.375em;
573  width: 0.875em;
574  height: 0.375em;
575  background: #dfdedeae;
576  -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
577    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
578  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
579    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
580  -webkit-transition: 0.6s;
581  -o-transition: 0.6s;
582  transition: 0.6s;
583}
584
585.bb8-toggle__cloud:nth-last-child(3) {
586  top: 1.25em;
587  right: 0.938em;
588  width: 0.875em;
589  height: 0.375em;
590  background: #ffffffae;
591  -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
592    drop-shadow(-0.625em 0.313em #ffffffae);
593  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
594    drop-shadow(-0.625em 0.313em #ffffffae);
595  -webkit-transition: 0.8s;
596  -o-transition: 0.8s;
597  transition: 0.8s;
598}
599
600.gomrassen,
601.hermes,
602.chenini {
603  position: absolute;
604  border-radius: var(--radius);
605  background: -o-linear-gradient(#fff, #6e8ea2);
606  background: -webkit-gradient(
607    linear,
608    left top,
609    left bottom,
610    from(#fff),
611    to(#6e8ea2)
612  );
613  background: linear-gradient(#fff, #6e8ea2);
614  top: 100%;
615}
616
617.gomrassen {
618  left: 0.938em;
619  width: 1.875em;
620  height: 1.875em;
621  -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
622  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
623  -webkit-transition: var(--transition);
624  -o-transition: var(--transition);
625  transition: var(--transition);
626}
627
628.gomrassen::before,
629.gomrassen::after {
630  content: "";
631  position: absolute;
632  border-radius: inherit;
633  -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
634  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
635  background: rgb(184, 196, 200);
636}
637
638.gomrassen::before {
639  left: 0.313em;
640  top: 0.313em;
641  width: 0.438em;
642  height: 0.438em;
643}
644
645.gomrassen::after {
646  width: 0.25em;
647  height: 0.25em;
648  left: 1.25em;
649  top: 0.75em;
650}
651
652.hermes {
653  left: 3.438em;
654  width: 0.625em;
655  height: 0.625em;
656  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
657  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
658  -webkit-transition: 0.6s;
659  -o-transition: 0.6s;
660  transition: 0.6s;
661}
662
663.chenini {
664  left: 4.375em;
665  width: 0.5em;
666  height: 0.5em;
667  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
668  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
669  -webkit-transition: 0.8s;
670  -o-transition: 0.8s;
671  transition: 0.8s;
672}
673
674.tatto-1,
675.tatto-2 {
676  position: absolute;
677  width: 1.25em;
678  height: 1.25em;
679  border-radius: var(--radius);
680}
681
682.tatto-1 {
683  background: #fefefe;
684  right: 3.125em;
685  top: 0.625em;
686  -webkit-box-shadow: 0 0 0.438em #fdf4e1;
687  box-shadow: 0 0 0.438em #fdf4e1;
688  -webkit-transition: var(--transition);
689  -o-transition: var(--transition);
690  transition: var(--transition);
691}
692
693.tatto-2 {
694  background: -o-linear-gradient(#e6ac5c, #d75449);
695  background: -webkit-gradient(
696    linear,
697    left top,
698    left bottom,
699    from(#e6ac5c),
700    to(#d75449)
701  );
702  background: linear-gradient(#e6ac5c, #d75449);
703  right: 1.25em;
704  top: 2.188em;
705  -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
706  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
707  -webkit-transition: 0.7s;
708  -o-transition: 0.7s;
709  transition: 0.7s;
710}
711
712.bb8-toggle__star {
713  position: absolute;
714  width: 0.063em;
715  height: 0.063em;
716  background: #fff;
717  border-radius: var(--radius);
718  -webkit-filter: drop-shadow(0 0 0.063em #fff);
719  filter: drop-shadow(0 0 0.063em #fff);
720  color: #fff;
721  top: 100%;
722}
723
724.bb8-toggle__star:nth-child(1) {
725  left: 3.75em;
726  -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
727    -3.125em 1.875em, 1.25em 2.813em;
728  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
729    -3.125em 1.875em, 1.25em 2.813em;
730  -webkit-transition: 0.2s;
731  -o-transition: 0.2s;
732  transition: 0.2s;
733}
734
735.bb8-toggle__star:nth-child(2) {
736  left: 4.688em;
737  -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
738    -3.125em 1.25em, 1.25em -1.563em;
739  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
740    -3.125em 1.25em, 1.25em -1.563em;
741  -webkit-transition: 0.3s;
742  -o-transition: 0.3s;
743  transition: 0.3s;
744}
745
746.bb8-toggle__star:nth-child(3) {
747  left: 5.313em;
748  -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
749    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
750  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
751    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
752  -webkit-transition: var(--transition);
753  -o-transition: var(--transition);
754  transition: var(--transition);
755}
756
757.bb8-toggle__star:nth-child(4) {
758  left: 1.875em;
759  width: 0.125em;
760  height: 0.125em;
761  -webkit-transition: 0.5s;
762  -o-transition: 0.5s;
763  transition: 0.5s;
764}
765
766.bb8-toggle__star:nth-child(5) {
767  left: 5em;
768  width: 0.125em;
769  height: 0.125em;
770  -webkit-transition: 0.6s;
771  -o-transition: 0.6s;
772  transition: 0.6s;
773}
774
775.bb8-toggle__star:nth-child(6) {
776  left: 2.5em;
777  width: 0.125em;
778  height: 0.125em;
779  -webkit-transition: 0.7s;
780  -o-transition: 0.7s;
781  transition: 0.7s;
782}
783
784.bb8-toggle__star:nth-child(7) {
785  left: 3.438em;
786  width: 0.125em;
787  height: 0.125em;
788  -webkit-transition: 0.8s;
789  -o-transition: 0.8s;
790  transition: 0.8s;
791}
792
793/* actions */
794
795.bb8-toggle__checkbox:checked
796  + .bb8-toggle__container
797  .bb8-toggle__star:nth-child(1) {
798  top: 0.625em;
799}
800
801.bb8-toggle__checkbox:checked
802  + .bb8-toggle__container
803  .bb8-toggle__star:nth-child(2) {
804  top: 1.875em;
805}
806
807.bb8-toggle__checkbox:checked
808  + .bb8-toggle__container
809  .bb8-toggle__star:nth-child(3) {
810  top: 1.25em;
811}
812
813.bb8-toggle__checkbox:checked
814  + .bb8-toggle__container
815  .bb8-toggle__star:nth-child(4) {
816  top: 3.438em;
817}
818
819.bb8-toggle__checkbox:checked
820  + .bb8-toggle__container
821  .bb8-toggle__star:nth-child(5) {
822  top: 3.438em;
823}
824
825.bb8-toggle__checkbox:checked
826  + .bb8-toggle__container
827  .bb8-toggle__star:nth-child(6) {
828  top: 0.313em;
829}
830
831.bb8-toggle__checkbox:checked
832  + .bb8-toggle__container
833  .bb8-toggle__star:nth-child(7) {
834  top: 1.875em;
835}
836
837.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
838  right: -100%;
839}
840
841.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
842  top: 0.938em;
843}
844
845.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
846  top: 2.5em;
847}
848
849.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
850  top: 2.75em;
851}
852
853.bb8-toggle__checkbox:checked + .bb8-toggle__container {
854  background-position-y: 0;
855}
856
857.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
858  top: 100%;
859}
860
861.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
862  top: 100%;
863}
864
865.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
866  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
867}
868
869.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
870  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
871  -webkit-transform: skew(70deg);
872  -ms-transform: skew(70deg);
873  transform: skew(70deg);
874}
875
876.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
877  -webkit-transform: rotate(180deg);
878  -ms-transform: rotate(180deg);
879  transform: rotate(225deg);
880}
881
882.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
883  left: 100%;
884}
885
886.bb8-toggle__checkbox:not(:checked):hover
887  + .bb8-toggle__container
888  .bb8__antenna:nth-child(1) {
889  right: 1.5em;
890}
891
892.bb8-toggle__checkbox:hover
893  + .bb8-toggle__container
894  .bb8__antenna:nth-child(2) {
895  left: 0.938em;
896}
897
898.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
899  background-position: 1.375em 0;
900}
901
902.bb8-toggle__checkbox:checked:hover
903  + .bb8-toggle__container
904  .bb8__head::before {
905  left: 0;
906}
907
908.bb8-toggle__checkbox:checked:hover
909  + .bb8-toggle__container
910  .bb8__antenna:nth-child(2) {
911  left: calc(100% - 0.938em);
912}
913
914.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
915  background-position: -1.375em 0;
916}
917
918.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
919  -webkit-transform: rotate(25deg);
920  -ms-transform: rotate(25deg);
921  transform: rotate(25deg);
922}
923
924.bb8-toggle__checkbox:checked:active
925  + .bb8-toggle__container
926  .bb8__head-container {
927  -webkit-transform: rotate(-25deg);
928  -ms-transform: rotate(-25deg);
929  transform: rotate(-25deg);
930}
931
932.bb8:hover .bb8__head::before,
933.bb8:hover .bb8__antenna:nth-child(2) {
934  left: 50% !important;
935}
936
937.bb8:hover .bb8__antenna:nth-child(1) {
938  right: 0.938em !important;
939}
940
941.bb8:hover .bb8__head::after {
942  background-position: 0 0 !important;
943}

/* REMASTERED */
/* RTX-ON */
/* completely redone toggle and droid */

.bb8-toggle {
  --toggle-size: 16px;
  /* finally I removed the scale now everything depends on the font-size */
  /* --margin-top-for-head: 1.75em; */
  /* it's just in case 👆 */
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
    no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bb8-toggle {
  cursor: pointer;
  margin-top: var(--margin-top-for-head);
  font-size: var(--toggle-size);
}

.bb8-toggle__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.bb8-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--toggle-bg);
  background-size: 100% 11.25em;
  background-position-y: -5.625em;
  border-radius: var(--radius);
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
}

.bb8__head-container {
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
  -webkit-transform-origin: 1.25em 3.75em;
  -ms-transform-origin: 1.25em 3.75em;
  transform-origin: 1.25em 3.75em;
}

.bb8__head {
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(
      45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(
      -45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8__head::before {
  content: "";
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: -o-radial-gradient(
      0.25em 0.375em,
      0.125em circle,
      red,
      transparent
    ),
    -o-radial-gradient(0.375em 0.188em, 0.063em circle, var(--bb8-bg) 50%, transparent
          100%),
    -o-linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  background: radial-gradient(
      0.125em circle at 0.25em 0.375em,
      red,
      transparent
    ),
    radial-gradient(
      0.063em circle at 0.375em 0.188em,
      var(--bb8-bg) 50%,
      transparent 100%
    ),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__head::after {
  content: "";
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: -o-linear-gradient(
    left,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.125em, var(--accent)),
    color-stop(0.125em, transparent),
    color-stop(0.188em, var(--accent)),
    color-stop(0.313em, transparent),
    color-stop(0.375em, var(--accent)),
    color-stop(0.938em, transparent),
    color-stop(1em, var(--accent)),
    color-stop(1.125em, transparent),
    color-stop(1.875em, var(--accent)),
    color-stop(2em, transparent),
    color-stop(2.063em, var(--accent)),
    color-stop(2.25em, transparent),
    color-stop(2.313em, var(--accent)),
    color-stop(2.375em, transparent),
    color-stop(2.438em, var(--accent))
  );
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna {
  position: absolute;
  -webkit-transform: translateY(-90%);
  -ms-transform: translateY(-90%);
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: -o-linear-gradient(#000 0.188em, silver 0.188em);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.188em, #000),
    color-stop(0.188em, silver)
  );
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
  -ms-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8__body {
  width: 4.375em;
  height: 4.375em;
  background: var(--bb8-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: -webkit-gradient(
      linear,
      right top,
      left top,
      color-stop(4%, var(--bb8-bg)),
      color-stop(4%, var(--accent)),
      color-stop(10%, transparent),
      color-stop(90%, var(--accent)),
      color-stop(96%, var(--bb8-bg))
    ),
    -webkit-gradient(linear, left top, left bottom, color-stop(4%, var(--bb8-bg)), color-stop(4%, var(--accent)), color-stop(10%, transparent), color-stop(90%, var(--accent)), color-stop(96%, var(--bb8-bg))),
    -webkit-gradient(linear, left top, right top, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent)),
    -webkit-gradient(linear, left top, left bottom, color-stop(2.156em, transparent), color-stop(2.156em, silver), color-stop(2.188em, transparent));
  background: -o-linear-gradient(
      right,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    -o-linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10%
          90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
    -o-linear-gradient(left, transparent 2.156em, silver 2.156em 2.219em, transparent
          2.188em),
    -o-linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent
          2.188em);
  background: linear-gradient(
      -90deg,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      to right,
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    ),
    linear-gradient(
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    );
  background-color: var(--bb8-bg);
}

.bb8__body::after {
  content: "";
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  -webkit-box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em,
    2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8__body::before {
  content: "";
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  z-index: 0.1;
  overflow: hidden;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: -o-radial-gradient(
      center,
      1em circle,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
          58%),
    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
          58%);
  background: -o-radial-gradient(
      center,
      1em circle,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    -o-radial-gradient(center, 1.25em circle, var(--bb8-bg) 50%, transparent 51%),
    -o-linear-gradient(right, transparent 42%, var(--accent) 42% 58%, transparent
          58%),
    -o-linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg)
          58%);
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    -webkit-gradient(linear, right top, left top, color-stop(42%, transparent), color-stop(42%, var(--accent)), color-stop(58%, transparent)),
    -webkit-gradient(linear, left top, left bottom, color-stop(42%, var(--bb8-bg)), color-stop(42%, var(--accent)), color-stop(58%, var(--bb8-bg)));
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(
      -90deg,
      transparent 42%,
      var(--accent) 42% 58%,
      transparent 58%
    ),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8__shadow {
  content: "";
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  -webkit-box-shadow: 0.313em 0 3.125em #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: skew(-70deg);
  -ms-transform: skew(-70deg);
  transform: skew(-70deg);
  z-index: 1;
}

.bb8-toggle__scenery {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}

.bb8-toggle__scenery::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  -webkit-filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: -o-linear-gradient(bottom left, #ffffffae, #ffffffae);
  background: -webkit-gradient(
    linear,
    left bottom,
    right top,
    from(#ffffffae),
    to(#ffffffae)
  );
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  -webkit-filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  -webkit-filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.gomrassen,
.hermes,
.chenini {
  position: absolute;
  border-radius: var(--radius);
  background: -o-linear-gradient(#fff, #6e8ea2);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#fff),
    to(#6e8ea2)
  );
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  -webkit-box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.gomrassen::before,
.gomrassen::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  -webkit-box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  -webkit-box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.tatto-1,
.tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  -webkit-box-shadow: 0 0 0.438em #fdf4e1;
  box-shadow: 0 0 0.438em #fdf4e1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.tatto-2 {
  background: -o-linear-gradient(#e6ac5c, #d75449);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e6ac5c),
    to(#d75449)
  );
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  -webkit-box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  -webkit-filter: drop-shadow(0 0 0.063em #fff);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  -webkit-box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  -webkit-box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  -webkit-box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em,
    -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

/* actions */

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(1) {
  top: 0.625em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(2) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(3) {
  top: 1.25em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(4) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(5) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(6) {
  top: 0.313em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(7) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
  right: -100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
  top: 0.938em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
  top: 2.5em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
  top: 2.75em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container {
  background-position-y: 0;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
  -webkit-transform: skew(70deg);
  -ms-transform: skew(70deg);
  transform: skew(70deg);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(225deg);
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
  left: 100%;
}

.bb8-toggle__checkbox:not(:checked):hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(1) {
  right: 1.5em;
}

.bb8-toggle__checkbox:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: 0.938em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
  background-position: 1.375em 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__head::before {
  left: 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: calc(100% - 0.938em);
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
  background-position: -1.375em 0;
}

.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
}

.bb8-toggle__checkbox:checked:active
  + .bb8-toggle__container
  .bb8__head-container {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.bb8:hover .bb8__head::before,
.bb8:hover .bb8__antenna:nth-child(2) {
  left: 50% !important;
}

.bb8:hover .bb8__antenna:nth-child(1) {
  right: 0.938em !important;
}

.bb8:hover .bb8__head::after {
  background-position: 0 0 !important;
}

Toggle prefixes

23K views

Copy to Figma

23K views

Comments

mxxpower 23. June at 10:29

23. June at 10:29

can somebody tell me where i can find the ui in figma

bryandelgado99 26. July 2023. at 13:29

26. July 2023. at 13:29

Amazing and beautiful work!

Variations

Get code

Link to post

MIT License

Copyright - 2024 Galahhad (Galahad) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.