/* ── Slider component ─────────────────────────────────────────── */

@layer components {
  .slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--secondary);
    cursor: pointer;
    outline: none;
    border: none;
    accent-color: var(--primary);

    /* Track — WebKit */
    &::-webkit-slider-runnable-track {
      height: 0.5rem;
      border-radius: 9999px;
      background: var(--secondary);
    }

    /* Track — Firefox */
    &::-moz-range-track {
      height: 0.5rem;
      border-radius: 9999px;
      background: var(--secondary);
      border: none;
    }

    /* Filled portion — Firefox */
    &::-moz-range-progress {
      height: 0.5rem;
      border-radius: 9999px;
      background: var(--primary);
    }

    /* Thumb — WebKit */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: var(--background);
      border: 2px solid var(--primary);
      margin-top: -0.375rem;
      cursor: pointer;
      transition: box-shadow 150ms;
    }

    /* Thumb — Firefox */
    &::-moz-range-thumb {
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: var(--background);
      border: 2px solid var(--primary);
      cursor: pointer;
      transition: box-shadow 150ms;
    }

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

      &::-moz-range-thumb {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &::-webkit-slider-thumb { cursor: not-allowed; }
      &::-moz-range-thumb { cursor: not-allowed; }
    }
  }
}