@layer ui-reset, ui;

/* slider */
@layer ui {
  input[type="range"] {
    appearance: none;
    width: 100%;
    height: var(--ui-spacing-2);
    border-radius: var(--ui-rounded-full);
    background: linear-gradient(to right, var(--ui-primary) calc(var(--pct, 0) * 100%), var(--ui-neutral-200) calc(var(--pct, 0) * 100%));
    cursor: pointer;
    margin-block: calc(var(--ui-spacing-2) + 2px);
    outline: none;

    &::-webkit-slider-thumb {
      appearance: none;
      aspect-ratio: 1;
      border-radius: var(--ui-rounded-full-fixed);
      background: var(--ui-background-color);
      width: 1.125rem;
      box-shadow: 0 0 0 2px var(--ui-primary) inset;
      transition: outline-color .1s;
    }

    &::-moz-range-thumb {
      border-radius: var(--ui-rounded-full-fixed);
      background: var(--ui-background-color);
      width: 1.125rem;
      height: 1.125rem;
      box-shadow: 0 0 0 2px var(--ui-primary) inset;
      cursor: pointer;
      border: none;
    }

    &:focus-visible::-webkit-slider-thumb {
      outline: 2px solid var(--ui-neutral-950);
      outline-offset: 2px;
    }

    &:focus-visible::-moz-range-thumb {
      outline: 2px solid var(--ui-neutral-950);
      outline-offset: 2px;
    }

    &:disabled {
      cursor: default;
      opacity: .4;
    }
  }
}