maccounter

1
.switch {
2
    position: relative;
3
    display: flex;
4
    --height-switch: 20px;
5
    height: var(--height-switch);
6
    width: calc(var(--height-switch) * 2);
7
}
8

9
.switch input {
10
    opacity: 0;
11
    height: 0;
12
    width: 0;
13
}
14

15
.slider {
16
    display: block;
17
    position: relative;
18
    cursor: pointer;
19
    height: var(--height-switch);
20
    width: calc(var(--height-switch) * 2);
21
    transition: 0.2s;
22
    background-color: var(--color-main);
23
    box-shadow: inset 0 0 0 1px var(--color-main);
24
    border-radius: var(--height-switch);
25
}
26

27
.slider:before {
28
    position: absolute;
29
    content: "";
30
    height: 16px;
31
    width: 16px;
32
    top: 50%;
33
    left: 2px;
34
    bottom: 2px;
35
    background-color: var(--color-bg-body);
36
    transform: translateY(-50%);
37
    border-radius: 50%;
38
    transition: 0.2s;
39
}
40

41
.switch input:checked + .slider {
42
    background-color: var(--color-bg-body);
43
}
44

45
.switch input:checked + .slider:before {
46
    transform: translateY(-50%) translateX(var(--height-switch));
47
    background-color: var(--color-main);
48
}
49