32 lines
754 B
SCSS
32 lines
754 B
SCSS
|
@use '../../styles/tokens/typography' as *;
|
||
|
|
|
||
|
|
.select-option {
|
||
|
|
padding: var(--nds-spacing-xs) var(--nds-spacing-md);
|
||
|
|
cursor: pointer;
|
||
|
|
color: var(--nds-text);
|
||
|
|
background-color: var(--nds-neutral);
|
||
|
|
transition: background-color 0.15s ease;
|
||
|
|
|
||
|
|
&:hover:not(.select-option__disabled) {
|
||
|
|
background-color: var(--nds-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background-color: var(--nds-accent);
|
||
|
|
}
|
||
|
|
|
||
|
|
&__selected {
|
||
|
|
background-color: var(--nds-primary);
|
||
|
|
color: var(--nds-text);
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: color-mix(in srgb, var(--nds-primary) 85%, var(--nds-background));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&__disabled {
|
||
|
|
background-color: var(--nds-disabled);
|
||
|
|
color: color-mix(in srgb, var(--nds-text) 40%, transparent);
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
}
|