atproto blogging
nonbinary.computer
1.radio-group {
2 display: flex;
3 flex-direction: column;
4 gap: .75rem;
5}
6
7.radio-item {
8 display: flex;
9 flex-direction: row;
10 align-items: center;
11 padding: 0;
12 border: none;
13 background-color: transparent;
14 color: var(--secondary-color-4);
15 font-size: 14px;
16 gap: .75rem;
17
18 &::before {
19 display: block;
20 width: 1rem;
21 height: 1rem;
22 box-sizing: border-box;
23 border-radius: 1.5rem;
24 background: var(--light, var(--primary-color)) var(--dark, var(--primary-color-3));
25 box-shadow: 0 0 0 1px var(--light, var(--primary-color-6))
26 var(--dark, var(--primary-color-7));
27 content: "";
28 cursor: pointer;
29 }
30
31 &:focus-visible {
32 outline: none;
33 }
34
35 &:focus-visible::before {
36 box-shadow: 0 0 0 2px var(--focused-border-color);
37 }
38
39 &[data-state="checked"]::before {
40 border: 0.25rem solid var(--light, var(--primary-color)) var(--dark, var(--primary-color-3));
41 background: var(--secondary-color-4);
42 }
43
44 &[data-disabled="true"]::before {
45 cursor: not-allowed;
46 opacity: 0.5;
47 }
48}