Switch by 3bdel3ziz-T

1/* The switch container */
2.switch {
3  --transition: 300ms;
4  --transition500: 500ms;
5  --color-dark: #0c0f14;
6  --color-darkGray: #21262e;
7  --color-gray: #52555a;
8  --color-offwhite: #cecece;
9  --shadow-color: var(--color-dark);
10  position: relative;
11  display: flex;
12  align-items: center;
13  width: 60px;
14  height: fit-content;
15  background-color: var(--color-dark);
16  border-radius: 30px;
17  padding: 4px;
18  transition: var(--transition500);
19  user-select: none;
20  cursor: pointer;
21  overflow: hidden;
22}
23
24/* Svg styles */
25.switch .svg {
26  transition: var(--transition);
27  position: absolute;
28  left: 5px;
29}
30.switch .moon {
31  width: 18px;
32  fill: var(--color-gray);
33  opacity: 1;
34}
35
36.switch .sun {
37  transform: translateY(-50%);
38  width: 12px;
39  height: 12px;
40  border-radius: 50%;
41  left: calc(100% - 21.5px);
42  top: 15px;
43  display: flex;
44  align-items: center;
45  justify-content: center;
46  scale: 0.8;
47  opacity: 0;
48}
49
50.switch .sun .dot {
51  positon: relative;
52  display: block;
53  width: 3px;
54  height: 3px;
55  border-radius: 50%;
56  background: var(--color-dark);
57  background: white;
58  z-index: 1;
59  box-shadow: 11px 0px 0px var(--shadow-color),
60    10.3px 0px 0px var(--shadow-color), -11px 0px 0px var(--shadow-color),
61    -10.3px 0px 0px var(--shadow-color), 0px -11px 0px var(--shadow-color),
62    0px -10.3px 0px var(--shadow-color), 0px 11px 0px var(--shadow-color),
63    0px 10.3px 0px var(--shadow-color), 8px 8px 0px var(--shadow-color),
64    7.3px 7.3px 0px var(--shadow-color), 8px -8px 0px var(--shadow-color),
65    7.3px -7.3px 0px var(--shadow-color), -8px -8px 0px var(--shadow-color),
66    -7.3px -7.3px 0px var(--shadow-color), -8px 8px 0px var(--shadow-color),
67    -7.3px 7.3px 0px var(--shadow-color);
68}
69
70.switch .sun .dot::before {
71  content: "";
72  position: absolute;
73  top: 50%;
74  left: 50%;
75  transform: translate(-50%, -50%);
76  width: 10px;
77  height: 10px;
78  border-radius: 50%;
79  background: white;
80  border: 2px solid var(--color-dark);
81}
82
83/*checkbox styles */
84.switch .circle {
85  appearance: none;
86  position: relative;
87  width: 25px;
88  height: 25px;
89  border-radius: 50%;
90  left: 0;
91  background-color: var(--color-darkGray);
92  border: 1px solid var(--color-darkGray);
93  transition: var(--transition500);
94  box-shadow: 1px 1px 20px 3px var(--color-darkGray);
95}
96
97.switch:has(.circle:checked) {
98  background: var(--color-offwhite);
99}
100
101.switch .circle:hover {
102  margin-left: 3px;
103}
104.switch .circle:checked:hover {
105  margin-left: -3px;
106}
107
108.switch .circle:checked {
109  left: calc(100% - 24px);
110  background: white;
111  border-color: white;
112  box-shadow: 1px 1px 30px 12px white;
113}
114
115.switch:has(.circle:checked) > .sun {
116  opacity: 1;
117}
118
119.switch:has(.circle:checked) > .moon {
120  opacity: 0;
121}
122