51 lines
856 B
SCSS
51 lines
856 B
SCSS
@use '$src/themes/spacing' as *;
|
|
@use '$src/themes/layout' as *;
|
|
@use '$src/themes/effects' as *;
|
|
@use '$src/themes/colors' as *;
|
|
|
|
.container {
|
|
display: inline-flex;
|
|
border-radius: $full-corner;
|
|
padding: $unit-half;
|
|
|
|
&.contained {
|
|
background-color: var(--segmented-control-background-bg);
|
|
}
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
gap: $unit-half;
|
|
align-items: center;
|
|
}
|
|
|
|
.item {
|
|
all: unset;
|
|
cursor: pointer;
|
|
border-radius: $full-corner;
|
|
padding: $unit-half;
|
|
@include smooth-transition($duration-quick, background-color, opacity);
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--option-bg-hover);
|
|
}
|
|
|
|
&:focus-visible {
|
|
@include focus-ring($blue);
|
|
}
|
|
|
|
&[data-state='on'] {
|
|
background-color: var(--accent-subtle-bg);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
width: $unit-3x;
|
|
height: $unit-3x;
|
|
display: block;
|
|
}
|