:root {
  --segmented-switch-background: var(--color-muted);
  --segmented-switch-option-background: var(--color-clear);
  --segmented-switch-selected-background: var(--color-selected-strong);
  --segmented-switch-selected-foreground: var(--color-selected-strong-foreground);
  --segmented-switch-hover-background: var(--color-accent);
  --segmented-switch-padding: var(--space-1);
  --segmented-switch-gap: var(--space-1);
  --segmented-switch-radius: var(--radius-10);
  --segmented-switch-option-radius: var(--radius-8);
  --segmented-switch-option-padding: var(--space-2) var(--space-2-5);
  --segmented-switch-font: var(--font-type-label-small);
  --segmented-switch-selected-font: var(--font-type-label-small-strong);
  --segmented-switch-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --segmented-switch-input-opacity: var(--opacity-0);
  --segmented-switch-label-gap: var(--space-2);
  --segmented-switch-disabled-selected-shadow: inset 0 0 0 var(--control-border-width) var(--color-disabled-foreground);
}

.segmented-switch {
  position: relative;
  display: inline-grid;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}
.segmented-switch__legend {
  padding: 0;
  margin-block-end: var(--segmented-switch-label-gap);
  color: var(--color-foreground);
  font: var(--segmented-switch-selected-font);
}
.segmented-switch__legend--hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.segmented-switch__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-inline-size: 0;
  gap: var(--segmented-switch-gap);
  padding: var(--segmented-switch-padding);
  border-radius: var(--segmented-switch-radius);
  background: var(--segmented-switch-background);
}
.segmented-switch__option {
  position: relative;
  display: flex;
  min-inline-size: 0;
}
.segmented-switch__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: var(--segmented-switch-input-opacity);
  cursor: pointer;
}
.segmented-switch__text {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: var(--control-target-size);
  padding: var(--segmented-switch-option-padding);
  border-radius: var(--segmented-switch-option-radius);
  background: var(--segmented-switch-option-background);
  color: var(--color-muted-foreground);
  font: var(--segmented-switch-font);
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.segmented-switch__input:hover:not(:disabled):not(:checked) + .segmented-switch__text {
  background: var(--segmented-switch-hover-background);
  color: var(--color-foreground);
}
.segmented-switch__input:checked + .segmented-switch__text {
  background: var(--segmented-switch-selected-background);
  color: var(--segmented-switch-selected-foreground);
  font: var(--segmented-switch-selected-font);
}
.segmented-switch__input:focus-visible + .segmented-switch__text {
  outline: var(--segmented-switch-focus-outline);
  outline-offset: var(--focus-offset);
}
.segmented-switch__input:disabled { cursor: not-allowed; }
.segmented-switch__input:disabled + .segmented-switch__text {
  background: var(--color-disabled);
  color: var(--color-disabled-foreground);
}
/* Keep the selected choice recognizable even when the entire group is disabled. */
.segmented-switch__input:disabled:checked + .segmented-switch__text {
  box-shadow: var(--segmented-switch-disabled-selected-shadow);
}