[data-component="radio-group"] { --radio-group-height: 28px; --radio-group-gap: 4px; --radio-group-padding: 2px; display: inline-flex; [data-slot="radio-group-wrapper"] { all: unset; background-color: var(--surface-inset-base); border-radius: var(--radius-sm); box-shadow: var(--shadow-xxs-border); display: inline-flex; height: var(--radio-group-height); margin: 0; overflow: visible; padding: 0; position: relative; width: fit-content; } &[data-fill] [data-slot="radio-group-wrapper"] { width: 100%; } [data-slot="radio-group-items"] { display: inline-flex; flex-direction: row; gap: var(--radio-group-gap); height: 100%; list-style: none; position: relative; z-index: 1; } &[data-fill] [data-slot="radio-group-items"] { width: 100%; } [data-slot="radio-group-indicator"] { background: var(--button-secondary-base); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs-border-base); content: ""; opacity: var(--indicator-opacity, 1); pointer-events: none; position: absolute; transition: opacity 200ms ease-out, box-shadow 100ms ease-in-out, width 200ms ease-out, height 200ms ease-out, transform 200ms ease-out; will-change: transform; z-index: 0; } [data-slot="radio-group-item"] { display: flex; height: 100%; min-width: 0; position: relative; } &[data-fill] [data-slot="radio-group-item"] { flex: 1; } [data-slot="radio-group-item-input"] { border-width: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } [data-slot="radio-group-item-label"] { color: var(--text-weak); cursor: default; display: flex; align-items: center; justify-content: center; font-family: var(--font-family-sans); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); flex: 1; height: 100%; line-height: 1; padding: var(--radio-group-padding); position: relative; transition: color 200ms ease-out, opacity 200ms ease-out; user-select: none; } [data-slot="radio-group-item-control"] { align-items: center; border-radius: var(--radius-xs); display: inline-flex; height: 100%; justify-content: center; min-width: 0; padding: var(--radio-group-control-padding, 0 10px); transition: background-color 200ms ease-out; width: 100%; } &[data-pad="none"] { --radio-group-control-padding: 0; } &[data-pad="normal"] { --radio-group-control-padding: 0 10px; } /* Checked state */ [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"] { color: var(--text-strong); } /* Hover state: match the inset background (adds subtle density) */ [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled]) + [data-slot="radio-group-item-label"]:hover [data-slot="radio-group-item-control"] { background-color: var(--surface-inset-base); } /* Do not overlay hover on the active segment */ [data-slot="radio-group-item-input"][data-checked] + [data-slot="radio-group-item-label"]:hover [data-slot="radio-group-item-control"] { background-color: transparent; } /* Disabled state */ [data-slot="radio-group-item-input"][data-disabled] + [data-slot="radio-group-item-label"] { cursor: not-allowed; opacity: 0.5; } /* Focus state */ [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible) [data-slot="radio-group-indicator"] { box-shadow: var(--shadow-xs-border-focus); } /* Hide indicator when nothing is checked */ [data-slot="radio-group-wrapper"]:not(:has([data-slot="radio-group-item-input"][data-checked])) [data-slot="radio-group-indicator"] { --indicator-opacity: 0; } /* Vertical orientation */ &[aria-orientation="vertical"] [data-slot="radio-group-items"] { flex-direction: column; } /* Small size variant */ &[data-size="small"] { --radio-group-height: 24px; --radio-group-gap: 3px; --radio-group-padding: 2px; [data-slot="radio-group-item-label"] { font-size: 12px; } [data-slot="radio-group-item-control"] { padding: var(--radio-group-control-padding, 0 8px); } } &[data-size="small"][data-pad="normal"] { --radio-group-control-padding: 0 8px; } /* Disabled root state */ &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }