@layer base {
  .rangeInput {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;

    --thumb-size: 30px;
    --track-height: 10px;
    width: 100%;
    padding: calc(var(--thumb-size) / 2) 0;
    height: 10px;

    &::-webkit-slider-runnable-track {
      border-radius: 9px;
      height: var(--track-height);
      background: #0000004d;
      border-top: 1px solid #472715;
      box-shadow:
        0px 4px 2px 0px #00000040 inset,
        0px -1.5px 0px 0px #8a582d inset;
    }

    &::-moz-range-track {
      border-radius: 9px;
      height: var(--track-height);
      background: #0000004d;
      border-top: 1px solid #472715;
      box-shadow:
        0px 4px 2px 0px #00000040 inset,
        0px -1.5px 0px 0px #8a582d inset;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--thumb-size);
      height: var(--thumb-size);
      margin-top: calc((var(--track-height) / 2) - var(--thumb-size) / 2);
      background: #895428;
      border-radius: 50%;
      box-shadow:
        -2px 0px 1px 0px #00000040 inset,
        2px 0px 1px 0px #00000040 inset,
        0px 2px 1px 0px #be7f4a inset,
        0px -2px 1px 0px #3a1c09 inset,
        0px 1px 0px 0px #00000033;
      transition: transform 0.1s ease;
    }

    &:active::-webkit-slider-thumb {
      transform: scale(1.1);
    }

    ::-moz-range-thumb {
      width: var(--thumb-size);
      height: var(--thumb-size);
      margin-top: calc((var(--track-height) / 2) - var(--thumb-size) / 2);
      background: #895428;
      border-radius: 50%;
      box-shadow:
        -2px 0px 1px 0px #00000040 inset,
        2px 0px 1px 0px #00000040 inset,
        0px 2px 1px 0px #be7f4a inset,
        0px -2px 1px 0px #3a1c09 inset,
        0px 1px 0px 0px #00000033;
      transition: transform 0.1s ease;
    }

    &:active::-moz-range-thumb {
      transform: scale(1.1);
    }
  }

  .dragging::-webkit-slider-thumb {
    transform: scale(1.1);
  }

  .dragging::-moz-range-thumb {
    transform: scale(1.1);
  }
}