Spaces:
Sleeping
Sleeping
| /* ── Segmented primitive ────────────────────────────────────────── */ | |
| .ui-seg { | |
| display: inline-flex; | |
| gap: 2px; | |
| background: rgba(0, 0, 0, 0.28); | |
| padding: 3px; | |
| border-radius: var(--radius-pill); | |
| border: 1px solid var(--color-border); | |
| flex-shrink: 1; | |
| } | |
| .ui-seg__opt { | |
| font-family: var(--font-ui); | |
| font-weight: var(--weight-black); | |
| border: 0; | |
| border-radius: var(--radius-pill); | |
| cursor: pointer; | |
| background: transparent; | |
| color: var(--color-fg-subtle); | |
| white-space: nowrap; | |
| transition: | |
| background var(--dur-fast) var(--ease-out), | |
| color var(--dur-fast) var(--ease-out); | |
| } | |
| .ui-seg__opt:hover:not(.is-active) { | |
| color: var(--color-fg); | |
| background: rgba(255, 255, 255, 0.04); | |
| } | |
| .ui-seg__opt.is-active { | |
| background: rgba(243, 165, 182, 0.25); | |
| color: #fff9ef; | |
| } | |
| .ui-seg__opt:focus-visible { | |
| outline: none; | |
| box-shadow: var(--focus-ring); | |
| } | |
| /* sizes */ | |
| .ui-seg--size-xs .ui-seg__opt { padding: 2px 9px; font-size: var(--text-2xs); } | |
| .ui-seg--size-sm .ui-seg__opt { padding: 3px 10px; font-size: var(--text-xs); } | |