/* segmented-control.css: Segmented control (component 7). Owner: group A (P2.T4). Tokens only, logical properties only. */

[data-component="segmented-control"] { display: inline-flex; max-inline-size: 100%; }
[data-component="segmented-control"][data-fill="equal"] { display: flex; }

.segmented__group {
  display: inline-flex;
  align-items: stretch;
  box-sizing: border-box;
  min-block-size: var(--size-control-sm);
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: var(--space-1);
  background: var(--surface-sunken);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-control);
}
[data-component="segmented-control"][data-size="md"] .segmented__group { min-block-size: var(--size-control); }
[data-component="segmented-control"][data-fill="equal"] .segmented__group { display: flex; inline-size: 100%; }
[data-component="segmented-control"][data-fill="equal"] .segmented__segment { flex: 1 1 0; }

.segmented__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-inline-size: var(--size-target-min);
  padding-block: 0;
  padding-inline: var(--space-4);
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: calc(var(--radius-control) - var(--space-1));
  color: var(--text-secondary);
  font: var(--type-button);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.segmented__segment[aria-checked="true"] { background: var(--surface); color: var(--text); border-color: var(--border-control); }
.segmented__segment:hover:not([aria-checked="true"], :disabled, [aria-disabled="true"]),
.segmented[data-force="hover"] .segmented__segment:not([aria-checked="true"]):not(:disabled, [aria-disabled="true"]) { background: var(--surface-hover); }
.segmented__segment:active:not([aria-checked="true"], :disabled, [aria-disabled="true"]),
.segmented[data-force="active"] .segmented__segment:not([aria-checked="true"]):not(:disabled, [aria-disabled="true"]) { background: var(--border); }
.segmented__segment:focus-visible,
.segmented[data-force="focus-visible"] .segmented__segment[aria-checked="true"] {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: calc(-1 * var(--border-width-thick));
}
.segmented__segment:disabled,
.segmented__segment[aria-disabled="true"] { background: var(--surface-sunken); border-color: transparent; color: var(--text-disabled); cursor: not-allowed; }

/* Above three segments at small width: a select instead (both stay in sync; CSS shows one). */
.segmented__select { display: none; }
@media (width < 768px) {
  [data-component="segmented-control"][data-many="true"] .segmented__group { display: none; }
  [data-component="segmented-control"][data-many="true"] .segmented__select { display: grid; }
}
@media (width < 768px) and (pointer: coarse) {
  .segmented__group,
  [data-component="segmented-control"][data-size="md"] .segmented__group { min-block-size: var(--size-control-touch); }
}

/* Kitchen sink helper: a menu-width column for the equal-width variant. */
.segmented-sample { inline-size: var(--size-popover-sm); max-inline-size: 100%; }