atproto blogging
nonbinary.computer
1.switch-example {
2 display: flex;
3 align-items: center;
4 padding: 20px;
5 gap: 15px;
6}
7
8.switch {
9 all: unset;
10 position: relative;
11 width: 2rem;
12 height: 1.15rem;
13 border-radius: 9999px;
14 background-color: var(--primary-color-6);
15 cursor: pointer;
16 transition: background-color 150ms;
17}
18
19.switch[data-state="checked"] {
20 background-color: var(--secondary-color-2);
21}
22
23.switch-thumb {
24 display: block;
25 width: calc(1.15rem - 2px);
26 height: calc(1.15rem - 2px);
27 border-radius: 9999px;
28 background-color: var(--light, var(--primary-color)) var(--dark, var(--secondary-color-2));
29 transform: translateX(1px);
30 transition: transform 150ms;
31 will-change: transform;
32}
33
34.switch[data-state="checked"] .switch-thumb {
35 background-color: var(--light, var(--primary-color)) var(--dark, var(--primary-color-3));
36 transform: translateX(calc(2rem - 1px - (1.15rem - 2px)));
37}
38
39/* Only apply disabled styles when data-disabled is "true" */
40.switch[data-disabled="true"] {
41 cursor: not-allowed;
42 opacity: 0.5;
43}