@layer env.components {
  @property --env-slider-container {
    syntax: '*';
    inherits: false;
  }
  @property --env-slider-indicator {
    syntax: '*';
    inherits: false;
  }
  @property --env-slider-content {
    syntax: '*';
    inherits: false;
  }
  @property --env-slider-veil {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  @property --env-slider-fraction {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  @property --env-slider-stretch {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  .env-slider {
    --env-slider-height: var(--env-control-height);
    --env-slider-handle-inset: calc(var(--env-slider-height) / 4);
    --env-slider-track: var(--env-slider-container, var(--env-color-bg-neutral-muted));
    --env-slider-fill: var(--env-slider-indicator, var(--env-color-bg-neutral-subtle-pressed));
    --env-slider-ink: var(--env-slider-content, var(--env-color-fg-default));
    min-inline-size: 0;
  }
  .env-slider-control {
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template: 'slider' 100% / minmax(0, auto);
    block-size: var(--env-slider-height);
    overflow: hidden;
    border-radius: var(--env-radius-full);
    background: var(--env-slider-track, var(--env-color-bg-neutral-muted));
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    isolation: isolate;
    scale: calc(1 + var(--env-slider-stretch)) calc(1 - var(--env-slider-stretch) / 2);
    transform-origin: var(--env-slider-stretch-origin, left) center;
    transition:
      --env-slider-veil var(--env-motion-duration-fast) var(--env-motion-ease-enter),
      --env-slider-stretch var(--env-slider-stretch-spring, var(--env-motion-duration-slow))
        var(--env-motion-ease);
  }
  .env-slider-track {
    grid-area: slider;
    block-size: 100%;
    container-type: inline-size;
  }
  .env-slider-indicator {
    background: var(--env-slider-fill, var(--env-color-bg-neutral-subtle-pressed));
  }
  .env-slider-indicator::after {
    --env-slider-indicator-direction: to right;
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: var(--env-space-6);
    background: linear-gradient(
      var(--env-slider-indicator-direction),
      transparent,
      color-mix(in srgb, var(--env-slider-track) 80%, transparent)
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-slider-control[data-handle] .env-slider-indicator::after {
    opacity: var(--env-slider-veil);
  }
  .env-slider-indicator:dir(rtl)::after {
    --env-slider-indicator-direction: to left;
  }
  .env-slider-thumb {
    --env-slider-thumb-side: 1;
    --env-slider-thumb-at: calc(var(--env-slider-fraction, 0) * 100cqi);
    box-sizing: border-box;
    inline-size: calc(2 * var(--env-control-border-width));
    block-size: 55%;
    border-radius: var(--env-radius-full);
    background: var(--env-slider-ink, var(--env-color-fg-default));
    opacity: 0;
    transform: translateX(
      calc(
        var(--env-slider-thumb-side) *
          (
            clamp(
                var(--env-slider-handle-inset),
                var(--env-slider-thumb-at),
                100cqi - var(--env-slider-handle-inset)
              ) -
              var(--env-slider-thumb-at)
          )
      )
    );
    transition: opacity var(--env-motion-duration-fast) var(--env-motion-ease-enter);
  }
  .env-slider-thumb:dir(rtl) {
    --env-slider-thumb-side: -1;
  }
  .env-slider[data-ticks] .env-slider-track::after {
    content: '';
    position: absolute;
    inset-block: 35%;
    left: calc(100% / var(--env-slider-ticks));
    right: 0;
    background: linear-gradient(
        to right,
        var(--env-slider-ink) 0 var(--env-control-border-width),
        transparent 0
      )
      0 0 / calc(100% / (var(--env-slider-ticks) - 1)) 100% repeat-x;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--env-motion-duration-fast) var(--env-motion-ease-enter);
    --env-slider-part: calc(100% / (var(--env-slider-ticks) - 1));
    --env-slider-tick-faint: color-mix(in srgb, var(--env-color-fg-default) 25%, transparent);
    mask-image: linear-gradient(
      to right,
      var(--env-slider-tick-faint) calc(var(--env-slider-clear-start, 0%) - var(--env-slider-part)),
        var(--env-color-fg-default) 0
        calc(var(--env-slider-clear-end, 200%) - var(--env-slider-part)),
      var(--env-slider-tick-faint) 0
    );
  }
  .env-slider-header {
    position: relative;
    grid-area: slider;
    z-index: var(--env-z-raised);
    padding-inline: var(--env-space-4);
    pointer-events: none;
  }
  .env-slider-header > .env-slider-label {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--env-slider-content, var(--env-color-fg-default));
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .env-slider-header > .env-slider-value {
    flex: 0 0 auto;
    font-weight: var(--env-font-weight-medium);
    color: var(--env-slider-content, var(--env-color-fg-default));
    font-variant-numeric: tabular-nums;
  }
  .env-slider-header > .env-slider-label,
  .env-slider-header > .env-slider-value {
    scale: calc(1 / (1 + var(--env-slider-stretch))) calc(1 / (1 - var(--env-slider-stretch) / 2));
  }
  .env-slider-header > .env-slider-label,
  .env-slider-header > .env-slider-value:dir(rtl) {
    transform-origin: left center;
  }
  .env-slider-header > .env-slider-value,
  .env-slider-header > .env-slider-label:dir(rtl) {
    transform-origin: right center;
  }
  .env-slider-control[data-handle] .env-slider-thumb {
    opacity: calc(1 - 0.75 * var(--env-slider-veil));
  }
  .env-slider-control[data-ruler] .env-slider-track::after {
    opacity: 0.35;
  }
  .env-slider-control:has(:focus-visible) {
    outline: 2px solid var(--env-color-border-focus);
    outline-offset: 2px;
  }
  .env-slider[data-disabled] .env-slider-control {
    opacity: var(--env-state-disabled-opacity);
    cursor: default;
  }
  .env-slider[data-disabled] .env-slider-thumb,
  .env-slider[data-disabled] .env-slider-track::after {
    opacity: 0;
  }
  @media (pointer: coarse) {
    .env-slider {
      --env-slider-height: max(var(--env-control-height), var(--env-control-height-touch));
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .env-slider {
      transition: --env-slider-fraction var(--env-slider-glide, var(--env-motion-duration-fast))
        var(--env-motion-ease-enter);
    }
    .env-slider-indicator {
      transition:
        width var(--env-slider-glide, var(--env-motion-duration-fast)) var(--env-motion-ease-enter),
        inset-inline-start var(--env-slider-glide, var(--env-motion-duration-fast))
          var(--env-motion-ease-enter);
    }
    .env-slider-thumb {
      transition:
        opacity var(--env-motion-duration-fast) var(--env-motion-ease-enter),
        scale var(--env-motion-duration-fast) var(--env-motion-ease-enter),
        inset-inline-start var(--env-slider-glide, var(--env-motion-duration-fast))
          var(--env-motion-ease-enter);
    }
    .env-slider-control[data-dragging] .env-slider-thumb {
      scale: 1.5 1.2;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .env-slider-thumb,
    .env-slider-indicator::after,
    .env-slider-track::after {
      transition: none;
    }
    .env-slider-control,
    .env-slider-header > .env-slider-label,
    .env-slider-header > .env-slider-value {
      scale: none;
    }
  }
  @media (forced-colors: active) {
    .env-slider-control {
      outline: 1px solid CanvasText;
      outline-offset: -1px;
    }
    .env-slider-indicator {
      forced-color-adjust: none;
      background: none;
      box-shadow: inset 0 -4px Highlight;
    }
    .env-slider-thumb {
      forced-color-adjust: none;
      background-color: CanvasText;
    }
    .env-slider[data-disabled] .env-slider-indicator {
      box-shadow: inset 0 -4px GrayText;
    }
  }
}