Files
blitzkit/packages/website/src/components/SegmentedControl/index.module.css
T
2026-10-11 15:44:42 -05:00

55 lines
912 B
CSS

.options {
position: relative;
display: grid;
border-radius: var(--radius-max);
background-color: var(--gray-3);
.indicator {
position: absolute;
top: 0;
height: 100%;
background-color: var(--accent-3);
outline: var(--outline-focus);
border-radius: var(--radius-max);
transition: var(--duration-brief);
}
.option {
position: relative;
display: flex;
justify-content: center;
padding: var(--space-3) var(--space-4);
color: var(--gray-11);
cursor: pointer;
input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
}
.label {
white-space: nowrap;
}
&:has(input:checked) {
color: var(--gray-12);
}
&:has(input:focus-visible) {
outline: 2px solid var(--accent-8);
outline-offset: 2px;
border-radius: var(--radius-max);
}
}
}