oppi.li
1.switch {
2 display: grid;
3 grid-auto-flow: column;
4 height: fit-content;
5 align-items: center;
6 align-self: center;
7 background: var(--color-menu);
8 border: 1px solid var(--color-input-border);
9 border-radius: var(--border-radius);
10}
11
12.switch .item {
13 display: flex;
14 align-items: center;
15 padding: .5em 1.125em;
16 color: var(--color-text);
17 border-radius: var(--border-radius);
18 text-wrap: nowrap;
19}
20
21.switch .active.item {
22 background: var(--color-active);
23 outline: 1px solid var(--color-input-border);
24}
25
26@media (pointer: coarse) {
27 .switch .item {
28 padding: .75em 1.125em;
29 }
30}
31
32.switch button.item {
33 background: transparent;
34}