atproto blogging
nonbinary.computer
1.toggle-group {
2 width: fit-content;
3}
4
5.toggle-item {
6 min-width: 35px;
7 padding: 10px;
8 border-radius: 0;
9 border: 1px solid var(--color-border);
10 background-color: transparent;
11 color: var(--color-subtle);
12 font-size: 14px;
13 outline: none;
14 transition:
15 background-color 200ms ease,
16 border 200ms ease;
17}
18
19.toggle-group[data-allow-multiple-pressed="true"] .toggle-item {
20 border-top: 1px solid var(--color-border);
21 border-right: 1px solid var(--color-border);
22 border-bottom: 1px solid var(--color-border);
23}
24
25.toggle-item:hover,
26.toggle-item:focus-visible {
27 background-color: var(--color-surface);
28 cursor: pointer;
29}
30
31.toggle-item[data-state="on"] {
32 background-color: var(--color-primary);
33 color: var(--color-base);
34}
35
36.toggle-group[data-allow-multiple-pressed="true"] .toggle-item[data-state="on"] {
37 border-top: 1px solid var(--color-border);
38 border-right: 1px solid var(--color-border);
39 border-bottom: 1px solid var(--color-border);
40}
41
42.toggle-group[data-allow-multiple-pressed="true"] .toggle-item:first-child[data-state="on"] {
43 border: 1px solid var(--color-border);
44}
45
46.toggle-group[data-allow-multiple-pressed="true"] .toggle-item:first-child {
47 border: 1px solid var(--color-border);
48}