@layer components {
  /* Base range styles */
  .range {
    width: 100%;
    height: 0.5rem;
    padding: 0;
    appearance: none;

    &:focus {
      outline: 0;
    }

    &::-moz-focus-outer {
      border: 0;
    }

    /* Webkit slider thumb styles */
    &::-webkit-slider-thumb {
      @apply shadow-sm border border-border bg-primary rounded-full;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: -0.5rem;
      appearance: none;
      transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

      &:active {
        @apply bg-primary;
      }
    }

    /* Mozilla range thumb styles */
    &::-moz-range-thumb {
      @apply shadow-sm border border-border bg-primary rounded-full;
      width: 1.5rem;
      height: 1.5rem;
      margin-top: -0.5rem;
      appearance: none;
      transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

      &:active {
        @apply bg-primary;
      }
    }

    /* Mozilla range track styles */
    &::-moz-range-track {
      @apply bg-input;
      width: 100%;
      height: 0.5rem;
      color: transparent;
      cursor: pointer;
      border-color: transparent;
      border-radius: 0.188rem;
    }

    /* Webkit slider runnable track styles */
    &::-webkit-slider-runnable-track {
      @apply bg-input;
      width: 100%;
      height: 0.5rem;
      color: transparent;
      cursor: pointer;
      border-color: transparent;
      border-radius: 0.188rem;
    }

    /* Disabled state */
    &:disabled {
      pointer-events: none;

      &::-webkit-slider-thumb {
        @apply bg-accent;
      }

      &::-moz-range-thumb {
        @apply bg-accent;
      }
    }
  }
}