:where(:root),
:where(:host) {
  --vaadin-slider-track-background: var(--vaadin-background-container-strong);
  --vaadin-slider-track-height: var(--vaadin-gap-xs);
  --vaadin-slider-fill-border-color: var(--vaadin-border-color-secondary);
  --vaadin-slider-thumb-width: round(1lh - 4px, 2px);
  --vaadin-slider-thumb-height: round(1lh - 4px, 2px);
  --vaadin-slider-marks-font-size: var(--aura-font-size-xs);
}

:is(vaadin-slider, vaadin-range-slider) {
  --aura-surface-level: 6;
  --vaadin-slider-fill-background: linear-gradient(
      var(--_bg-dir, 90deg) in oklab,
      var(--aura-accent-color),
      light-dark(
        oklch(
          from var(--aura-accent-color-light) clamp(0.5, l * 1.2, 1) c calc(h - 30 * var(--_vaadin-safari-17-deg, 1))
        ),
        oklch(
          from var(--aura-accent-color-dark) clamp(0.5, l * 1.2, 1) c calc(h - 30 * var(--_vaadin-safari-17-deg, 1))
        )
      )
    )
    border-box;

  &:dir(rtl) {
    --_bg-dir: -90deg;
  }

  &::part(track-fill) {
    margin-inline-end: -1px;
  }

  &::part(thumb) {
    position: relative;
    background: var(
        --vaadin-slider-thumb-background,
        linear-gradient(
            light-dark(transparent, var(--vaadin-border-color-secondary)),
            transparent 33%,
            transparent 66%,
            light-dark(var(--vaadin-border-color-secondary), transparent)
          )
          var(--aura-surface-color-solid)
      )
      border-box;
    border-color: var(--vaadin-slider-thumb-border-color, oklch(1 0 0 / 0.1));
    outline-offset: -1px;
    box-shadow:
      0 0 0 1px light-dark(var(--vaadin-border-color), oklch(0 0 0 / 0.1)),
      var(--_thumb-shadow, var(--aura-shadow-s));
  }

  &[readonly] {
    --aura-surface-level: 4;
    --vaadin-slider-fill-background: var(--vaadin-text-color-secondary);
    --vaadin-slider-thumb-background: var(--aura-surface-color-solid);
    --vaadin-slider-thumb-border-color: oklch(1 0 0 / 0.1);
    --_thumb-shadow: 0 0 0 0 transparent;
  }

  &[disabled] {
    --aura-surface-level: 0;
    --vaadin-slider-track-background: var(--vaadin-background-container);
    --vaadin-slider-fill-background: var(--vaadin-border-color-secondary);
    --vaadin-slider-fill-border-color: transparent;
    --vaadin-slider-thumb-background: linear-gradient(
        var(--vaadin-background-container),
        var(--vaadin-background-container)
      )
      var(--vaadin-background-color);
    --vaadin-slider-thumb-border-color: var(--vaadin-border-color-secondary);

    &::part(thumb) {
      box-shadow: none;
    }
  }

  &::part(thumb)::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background-color: #000;
    opacity: 0;
    transition:
      opacity 100ms,
      background-color 100ms;
  }
}

vaadin-range-slider::part(track-fill) {
  margin-inline-start: calc(var(--vaadin-slider-thumb-width) - 1px);
}

vaadin-slider[active]:not([readonly], [disabled])::part(thumb)::before,
vaadin-range-slider[start-active]:not([readonly], [disabled])::part(thumb-start)::before,
vaadin-range-slider[end-active]:not([readonly], [disabled])::part(thumb-end)::before {
  opacity: 0.1;
}