atproto blogging
nonbinary.computer
1.checkbox {
2 width: 1rem;
3 height: 1rem;
4 box-sizing: border-box;
5 padding: 0;
6 border: none;
7 border-radius: 4px;
8 margin: 0;
9 background-color: var(--primary-color-3);
10 box-shadow: inset 0 0 0 1px var(--primary-color-7);
11 color: var(--secondary-color-4);
12 cursor: pointer;
13}
14
15.checkbox-indicator {
16 display: flex;
17 align-items: center;
18 justify-content: center;
19}
20
21.checkbox[data-state="checked"] {
22 background-color: var(--secondary-color-2);
23 box-shadow: none;
24 color: var(--primary-color);
25}
26
27.checkbox:focus-visible {
28 box-shadow: 0 0 0 2px var(--focused-border-color);
29}
30
31.checkbox-check-icon {
32 width: 1rem;
33 height: 1rem;
34 fill: none;
35 stroke: currentcolor;
36 stroke-linecap: round;
37 stroke-linejoin: round;
38 stroke-width: 2;
39}