.x-segmented-control {
  vertical-align: top;
  isolation: isolate;
  min-width: max-content;
  color: var(--neutral-12);
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--neutral-a3), var(--neutral-a3));
  font-family: var(--default-font-family);
  text-align: center;
  --seg-inset: 1px;
  --seg-transition-duration: .1s;
  --seg-track-radius: max(var(--radius-2), var(--radius-pill));
  --seg-indicator-radius: max(.5px,
    calc(var(--seg-track-radius) - var(--seg-inset)));
  --seg-indicator-bg: var(--color-background);
  border-radius: var(--seg-track-radius);
  border: 0;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: stretch;
  margin: 0;
  padding: 0;
  font-style: normal;
  display: inline-grid;
  position: relative;
}

:is(.dark, .dark-theme) :where(.x-segmented-control:not(.light, .light-theme)), :is(.dark, .dark-theme):where(.x-segmented-control:not(.light, .light-theme)) {
  --seg-indicator-bg: var(--neutral-a3);
}

.x-segmented-control > label {
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  -webkit-user-select: none;
  user-select: none;
  cursor: var(--cursor-button);
  color: var(--neutral-a11);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tab-inactive-letter-spacing);
  transition: color var(--seg-transition-duration);
  display: flex;
  position: relative;
}

.x-segmented-control > label:where(:first-child) {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.x-segmented-control > label:where(:last-child) {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.x-segmented-control :where(input[type="radio"]) {
  white-space: nowrap;
  clip-path: inset(50%);
  pointer-events: none;
  appearance: none;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.x-segmented-control > label:where(:has(:checked)) {
  color: var(--neutral-12);
}

.x-segmented-control > label:where(:has(:focus-visible)) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
  border-radius: inherit;
}

@media (hover: hover) {
  .x-segmented-control > label:where(:not(:has(:checked, :disabled)):hover) {
    background-color: var(--neutral-a2);
  }
}

.x-segmented-control > label + label:after {
  content: "";
  inset-inline-start: 0;
  top: var(--seg-inset);
  bottom: var(--seg-inset);
  background-color: var(--neutral-a4);
  z-index: -1;
  width: 1px;
  transition: opacity var(--seg-transition-duration) ease-out;
  margin-inline-start: -.5px;
  position: absolute;
}

.x-segmented-control > label:where(:has(:checked, :focus-visible)):after, .x-segmented-control > label:where(:has(:checked, :focus-visible)) + label:after {
  opacity: 0;
}

.x-segmented-control > label:before {
  content: "";
  inset: var(--seg-inset);
  z-index: -1;
  background-color: var(--seg-indicator-bg);
  border-radius: var(--seg-indicator-radius);
  box-shadow: 0 0 0 .5px var(--neutral-a3),
    0 1px 2px var(--neutral-a4);
  opacity: 0;
  transition: opacity var(--seg-transition-duration) ease-out;
  position: absolute;
}

.x-segmented-control > label:where(:has(:checked)):before {
  opacity: 1;
}

@supports (anchor-name: --x) {
  .x-segmented-control > label:before {
    display: none;
  }

  .x-segmented-control > label:where(:has(:checked)) {
    anchor-name: --x-seg-active;
  }

  .x-segmented-control:after {
    content: "";
    z-index: -1;
    top: var(--seg-inset);
    bottom: var(--seg-inset);
    left: anchor(--x-seg-active left);
    right: anchor(--x-seg-active right);
    background-color: var(--seg-indicator-bg);
    border-radius: var(--seg-indicator-radius);
    width: auto;
    box-shadow: 0 0 0 .5px var(--neutral-a3),
      0 1px 2px var(--neutral-a4);
    transition: left var(--seg-transition-duration) cubic-bezier(.45, .05, .55, .95),
      right var(--seg-transition-duration) cubic-bezier(.45, .05, .55, .95);
    position: absolute;
  }

  .x-segmented-control:not(:has(:checked)):after {
    display: none;
  }
}

.x-segmented-control:where(:disabled, [data-disabled]) {
  color: var(--neutral-a8);
  background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
}

.x-segmented-control:where(:disabled, [data-disabled]) > label, .x-segmented-control > label:where(:has(:disabled)) {
  cursor: var(--cursor-disabled);
  color: var(--neutral-a8);
}

.x-segmented-control:where(:disabled, [data-disabled]) > label:before, .x-segmented-control > label:where(:has(:disabled)):before {
  background-color: var(--neutral-a3);
  box-shadow: none;
}

@supports (anchor-name: --x) {
  .x-segmented-control:where(:disabled, [data-disabled]):after, .x-segmented-control:where(:has( > label:where(:has(:disabled)):has(:checked))):after {
    background-color: var(--neutral-a3);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .x-segmented-control, .x-segmented-control > label, .x-segmented-control > label:before, .x-segmented-control > label + label:after, .x-segmented-control:after {
    transition: none;
  }
}

@media (forced-colors: active) {
  .x-segmented-control {
    background-image: none;
    border: 1px solid buttontext;
  }

  .x-segmented-control > label {
    color: buttontext;
  }

  .x-segmented-control > label:where(:has(:checked)) {
    color: highlighttext;
  }

  .x-segmented-control > label:before, .x-segmented-control:after {
    box-shadow: none;
    background-color: highlight;
    border: 1px solid highlighttext;
  }

  .x-segmented-control > label:where(:has(:focus-visible)) {
    outline-color: highlight;
  }
}

.x-segmented-control:where(:not([data-size])), .x-segmented-control:where([data-size="2"]) {
  height: var(--space-6);
  --seg-track-radius: max(var(--radius-2), var(--radius-pill));
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

:is(.x-segmented-control:where(:not([data-size])), .x-segmented-control:where([data-size="2"])) > label {
  padding-inline: var(--space-3);
}

.x-segmented-control:where([data-size="1"]) {
  height: var(--space-5);
  --seg-track-radius: max(var(--radius-1), var(--radius-pill));
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
}

.x-segmented-control:where([data-size="1"]) > label {
  padding-inline: var(--space-2);
  gap: var(--space-1);
}

.x-segmented-control:where([data-size="3"]) {
  height: var(--space-7);
  --seg-track-radius: max(var(--radius-3), var(--radius-pill));
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}

.x-segmented-control:where([data-size="3"]) > label {
  padding-inline: var(--space-4);
  gap: var(--space-2);
}

.x-segmented-control:where([data-variant="soft"]) {
  background-image: linear-gradient(var(--accent-a3), var(--accent-a3));
}

.x-segmented-control:where([data-variant="soft"]) > label {
  color: var(--accent-a11);
}

.x-segmented-control:where([data-variant="soft"]) > label:where(:has(:checked)) {
  color: var(--accent-a12, var(--accent-12));
}

.x-segmented-control:where([data-variant="soft"]) > label + label:after {
  background-color: var(--accent-a4);
}

.x-segmented-control:where([data-high-contrast]) > label:where(:has(:checked)) {
  color: var(--neutral-12);
}

.x-segmented-control:where([data-high-contrast][data-variant="soft"]) > label:where(:has(:checked)) {
  color: var(--accent-12);
}