@layer env.components {
  .env-segmented-control[data-size='sm'] {
    --env-control-height: var(--env-control-height-sm);
  }
  .env-segmented-control[data-size='md'] {
    --env-control-height: var(--env-control-height-md);
  }
  .env-segmented-control[data-size='lg'] {
    --env-control-height: var(--env-control-height-lg);
  }
  @property --env-segmented-control-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-segmented-control-content {
    syntax: '*';
    inherits: false;
  }
  @property --env-segmented-control-outline {
    syntax: '*';
    inherits: false;
  }
  @property --env-segmented-control-selected {
    syntax: '*';
    inherits: false;
  }
  @property --env-segmented-control-selected-content {
    syntax: '*';
    inherits: false;
  }
  .env-segmented-control {
    --env-segmented-control-option-color: var(
      --env-segmented-control-content,
      var(--env-color-fg-muted)
    );
    --env-segmented-control-option-hover-color: var(
      --env-segmented-control-content,
      var(--env-color-fg-muted-hover)
    );
    --env-segmented-control-option-pressed-color: var(
      --env-segmented-control-content,
      var(--env-color-fg-muted-pressed)
    );
    --env-segmented-control-selected-color: var(
      --env-segmented-control-selected-content,
      var(--env-color-fg-default)
    );
    --env-segmented-control-custom: var(
      --env-segmented-control-container,
      var(--env-segmented-control-content)
    );
    --env-segmented-control-thumb-standard: light-dark(
      var(--env-color-bg-muted),
      var(--env-color-bg-neutral-strong-hover)
    );
    --env-segmented-control-thumb-high: var(--env-theme-high-contrast)
      light-dark(
        var(--env-color-bg-muted),
        color-mix(in srgb, var(--env-color-bg-neutral-muted-hover) 85%, transparent)
      );
    --env-segmented-control-thumb: var(
      --env-segmented-control-thumb-high,
      var(--env-segmented-control-thumb-standard)
    );
    --env-segmented-control-selected-gate: color-mix(
      in srgb,
      var(--env-segmented-control-selected-content) 0%,
      var(--env-segmented-control-thumb)
    );
    --env-segmented-control-custom-selected: var(
      --env-segmented-control-selected,
      var(--env-segmented-control-selected-gate)
    );
    --env-segmented-control-height: var(--env-control-height);
    --env-segmented-control-inset: clamp(
      0rem,
      (var(--env-segmented-control-height) - 1.5rem) / 2,
      0.1875rem
    );
    --env-segmented-control-gap: 0.125rem;
    --env-segmented-control-high-contrast-edge: var(--env-theme-high-contrast) inset 0 0 0
      var(--env-control-border-width) var(--env-color-border-default);
    --env-segmented-control-shadow: var(
      --env-segmented-control-high-contrast-edge,
      0 1px 2px oklch(from var(--env-color-bg-page) calc(l * 0.25) c h / calc(0.62 - l * 0.48)),
      0 0 0 0.5px oklch(from var(--env-color-fg-default) l c h / 0.08)
    );
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    inline-size: fit-content;
    max-inline-size: 100%;
    min-inline-size: 0;
    display: inline-flex;
    align-items: stretch;
    gap: var(--env-segmented-control-gap);
    min-block-size: var(--env-segmented-control-height);
    padding: var(--env-segmented-control-inset);
    outline: var(--env-control-border-width) solid var(--env-segmented-control-outline, transparent);
    outline-offset: calc(-1 * var(--env-control-border-width));
    border-radius: var(--env-radius-full);
    background: var(--env-segmented-control-container, var(--env-color-bg-neutral-muted));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .env-segmented-control-item {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-block-size: calc(
      var(--env-segmented-control-height) - 2 * var(--env-segmented-control-inset)
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--env-space-2);
    padding: min(
        var(--env-space-1),
        calc(
          (var(--env-segmented-control-height) - 2 * var(--env-segmented-control-inset) - 1lh) / 2
        )
      )
      var(--env-space-4);
    --env-segmented-control-layer: initial;
    --env-segmented-control-custom-fill: color-mix(
      in srgb,
      var(--env-segmented-control-custom) 0%,
      color-mix(in srgb, transparent, currentColor var(--env-segmented-control-layer))
    );
    --env-segmented-control-selected-layered: color-mix(
      in srgb,
      var(--env-segmented-control-custom-selected),
      currentColor var(--env-segmented-control-layer)
    );
    --env-segmented-control-selected-fill: var(
      --env-segmented-control-selected-layered,
      var(--env-segmented-control-custom-selected)
    );
    position: relative;
    border: 0;
    border-radius: var(--env-radius-full);
    background: transparent;
    color: var(--env-segmented-control-option-color, var(--env-color-fg-muted));
    font: var(--env-font-weight-medium) var(--env-font-size-label) / 1.4 var(--env-font-family);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter),
      color var(--env-motion-duration-fast) var(--env-motion-ease-enter),
      box-shadow var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-segmented-control-item::before {
    content: '';
    position: absolute;
    inset-block: calc(-1 * var(--env-segmented-control-inset));
    inset-inline: calc(var(--env-segmented-control-gap) / -2);
  }
  .env-segmented-control-item:first-child::before {
    inset-inline-start: calc(-1 * var(--env-segmented-control-inset));
  }
  .env-segmented-control-item:last-child::before {
    inset-inline-end: calc(-1 * var(--env-segmented-control-inset));
  }
  .env-segmented-control[data-size='sm'] .env-segmented-control-item {
    padding-inline: var(--env-space-3);
  }
  .env-segmented-control-item:hover:not([data-disabled]) {
    --env-segmented-control-layer: calc(var(--env-state-hover-opacity) * 100%);
  }
  .env-segmented-control-item:focus-visible:not([data-disabled]) {
    --env-segmented-control-layer: calc(var(--env-state-focus-opacity) * 100%);
  }
  .env-segmented-control-item:active:not([data-disabled]) {
    --env-segmented-control-layer: calc(var(--env-state-pressed-opacity) * 100%);
  }
  .env-segmented-control-item:focus-visible:not([data-checked]):not([data-disabled]) {
    background: var(--env-segmented-control-custom-fill, transparent);
  }
  .env-segmented-control-item:hover:not([data-checked]):not([data-disabled]) {
    background: var(--env-segmented-control-custom-fill, transparent);
    color: var(--env-segmented-control-option-hover-color, var(--env-color-fg-default));
  }
  .env-segmented-control-item:active:not([data-checked]):not([data-disabled]) {
    background: var(
      --env-segmented-control-custom-fill,
      var(--env-color-bg-neutral-subtle-pressed)
    );
    color: var(--env-segmented-control-option-pressed-color, var(--env-color-fg-muted-pressed));
  }
  .env-segmented-control-item[data-checked] {
    background: var(--env-segmented-control-selected-fill, var(--env-segmented-control-thumb));
    color: var(--env-segmented-control-selected-color, var(--env-color-fg-default));
    box-shadow: var(--env-segmented-control-shadow);
  }
  .env-segmented-control-thumb {
    display: none;
  }
  @media (prefers-reduced-motion: no-preference) and (not (forced-colors: active)) {
    .env-segmented-control-thumb[data-placed] {
      display: block;
      position: absolute;
      z-index: calc(var(--env-z-base) - var(--env-z-raised));
      top: 0;
      left: 0;
      inline-size: var(--env-segmented-control-thumb-width);
      block-size: var(--env-segmented-control-thumb-height);
      translate: var(--env-segmented-control-thumb-left) var(--env-segmented-control-thumb-top);
      border-radius: var(--env-radius-full);
      background: var(--env-segmented-control-custom-selected, var(--env-segmented-control-thumb));
      box-shadow: var(--env-segmented-control-shadow);
      pointer-events: none;
      transition:
        translate var(--env-motion-duration-medium) var(--env-motion-ease),
        inline-size var(--env-motion-duration-medium) var(--env-motion-ease),
        block-size var(--env-motion-duration-medium) var(--env-motion-ease),
        background-color var(--env-motion-duration-fast) var(--env-motion-ease-enter);
    }
    .env-segmented-control:has(> .env-segmented-control-thumb[data-placed])
      > .env-segmented-control-item[data-checked] {
      --env-segmented-control-thumb-layer: color-mix(
        in srgb,
        var(--env-segmented-control-custom-selected) 0%,
        color-mix(in srgb, transparent, currentColor var(--env-segmented-control-layer))
      );
      background: var(--env-segmented-control-thumb-layer, transparent);
      box-shadow: none;
    }
  }
  .env-segmented-control-item:focus-visible {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: -2px;
  }
  @media (pointer: coarse) {
    .env-segmented-control {
      --env-segmented-control-height: max(var(--env-control-height), var(--env-control-height-touch));
    }
    .env-segmented-control-item {
      min-inline-size: var(--env-control-height-touch);
    }
  }
  .env-segmented-control-item[data-disabled] {
    opacity: var(--env-state-disabled-opacity);
    cursor: default;
  }
  .env-segmented-control-item .env-icon {
    inline-size: var(--env-control-icon-size);
    block-size: var(--env-control-icon-size);
  }
  .env-segmented-control-item-count {
    font-size: 0.8125em;
    font-variant-numeric: tabular-nums;
  }
  .env-segmented-control-item:not([data-checked]) > .env-segmented-control-item-count {
    color: var(--env-color-fg-muted);
  }
  .env-segmented-control[data-full-width] {
    display: flex;
    inline-size: 100%;
    overflow-x: hidden;
  }
  .env-segmented-control[data-full-width] > .env-segmented-control-item {
    flex: 1 1 0;
    min-inline-size: 0;
  }
  .env-segmented-control[data-full-width] .env-segmented-control-item-label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (hover: none), (pointer: coarse) {
    .env-segmented-control[data-full-width] > .env-segmented-control-item {
      white-space: normal;
    }
    .env-segmented-control[data-full-width] .env-segmented-control-item-label {
      overflow: visible;
      text-overflow: clip;
      overflow-wrap: break-word;
      text-align: center;
    }
  }
  @media (forced-colors: active) {
    .env-segmented-control {
      outline-color: CanvasText;
    }
    .env-segmented-control-item[data-checked] {
      forced-color-adjust: none;
      background-color: Highlight;
      color: HighlightText;
    }
    .env-segmented-control-item[data-checked] :where(*) {
      color: inherit;
    }
    .env-segmented-control-item[data-disabled] {
      color: GrayText;
    }
    .env-segmented-control-item[data-checked]:focus-visible {
      outline-color: HighlightText;
    }
  }
}