34 lines
654 B
CSS
34 lines
654 B
CSS
@layer components {
|
|
.theme-switcher {
|
|
@media (max-width: 479px) {
|
|
--row-gap: 1ch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.theme-switcher__btn {
|
|
--btn-background: var(--color-ink-lightest);
|
|
--btn-border-radius: 0.4em;
|
|
--btn-border-size: 0;
|
|
--btn-gap: 0.1lh;
|
|
--btn-padding: 1em;
|
|
--icon-size: 2em;
|
|
|
|
column-gap: var(--inline-space);
|
|
flex: 1;
|
|
flex-direction: column;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
|
|
&:has(input:checked) {
|
|
--btn-background: var(--color-selected);
|
|
--btn-color: var(--color-ink);
|
|
}
|
|
|
|
@media (max-width: 479px) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
}
|