Something went wrong. Try again.
Something went wrong. Try again.
1.3 kB · 48 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849.toggle-group { width: fit-content;}
.toggle-item { min-width: 35px; padding: 10px; border-radius: 0; border: 1px solid var(--color-border); background-color: transparent; color: var(--color-subtle); font-size: 14px; outline: none; transition: background-color 200ms ease, border 200ms ease;}
.toggle-group[data-allow-multiple-pressed="true"] .toggle-item { border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);}
.toggle-item:hover,.toggle-item:focus-visible { background-color: var(--color-surface); cursor: pointer;}
.toggle-item[data-state="on"] { background-color: var(--color-primary); color: var(--color-base);}
.toggle-group[data-allow-multiple-pressed="true"] .toggle-item[data-state="on"] { border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);}
.toggle-group[data-allow-multiple-pressed="true"] .toggle-item:first-child[data-state="on"] { border: 1px solid var(--color-border);}
.toggle-group[data-allow-multiple-pressed="true"] .toggle-item:first-child { border: 1px solid var(--color-border);}