/* A26 Segmented Control · v1.0.0-alpha.0012 */
@layer a26.components {
  .a26-segmented-control { min-height: var(--a26-control-hit-min); padding: 3px; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; gap: 0; border-radius: var(--a26-segmented-radius); background: var(--a26-segmented-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a26-segmented-divider) 70%, transparent); }
  .a26-segmented-control button { min-width: 52px; height: calc(var(--a26-segmented-height) - 6px); padding: 0 12px; border: 0; border-radius: calc(var(--a26-segmented-radius) - 3px); background: transparent; color: var(--a26-text-primary); font: var(--a26-font-callout); cursor: pointer; position: relative; }
  .a26-segmented-control button + button::before { content: ''; position: absolute; inset-block: 7px; inset-inline-start: 0; width: 1px; background: var(--a26-segmented-divider); opacity: .65; }
  .a26-segmented-control button[aria-selected='true'] { background: var(--a26-segmented-selected-bg); box-shadow: var(--a26-segmented-selected-shadow); }
  .a26-segmented-control button[aria-selected='true']::before, .a26-segmented-control button[aria-selected='true'] + button::before { opacity: 0; }
  .a26-segmented-control button:focus-visible { outline: 3px solid color-mix(in srgb, var(--a26-focus-ring-color) 65%, transparent); outline-offset: 2px; }
  .a26-segmented-control[data-size='compact'] button { min-width: 44px; height: calc(var(--a26-segmented-compact-height) - 6px); padding-inline: 10px; font: var(--a26-font-subheadline); }
  .a26-segmented-control[data-disabled='true'] { opacity: .45; }
}
