.input {
  --track-height: 8px;
  --track-fill: 0%;
  --thumb-size: 32px;
  --thumb-offset: -12px;
  --thumb-highlight-size: 0;
  --brand-bg-gradient: linear-gradient(to bottom, var(--theme-red-color), var(--theme-red-color));
  display: block;
  width: 100%;
  // margin: 1ex 0;
  appearance: none;
  background: 0 0;
  outline-offset: 5px;
  padding: 8px 0;

  &::-webkit-slider-runnable-track {
    appearance: none;
    height: var(--track-height);
    border-radius: 5ex;
    background: linear-gradient(to right, transparent var(--track-fill), var(--theme-border-color) 0),
      var(--brand-bg-gradient) fixed;
  }

  &::-moz-range-track {
    appearance: none;
    height: var(--track-height);
    border-radius: 5ex;
    background: linear-gradient(to right, transparent var(--track-fill), var(--theme-border-color) 0),
      var(--brand-bg-gradient) fixed;
  }

  &::-webkit-slider-thumb {
    appearance: none;
    cursor: ew-resize;
    border: 4px solid var(--theme-card-color);
    height: var(--thumb-size);
    width: var(--thumb-size);
    margin-top: var(--thumb-offset);
    border-radius: 50%;
    background: var(--brand-bg-gradient) fixed;
    box-shadow: 0 0 0 var(--thumb-highlight-size) rgba(var(--theme-red-color-rgb), 0.2);

    @media (prefers-reduced-motion: no-preference) {
      transition: box-shadow 0.1s ease;
    }
  }

  &::-moz-range-thumb {
    appearance: none;
    cursor: ew-resize;
    border: 4px solid var(--theme-card-color);
    height: var(--thumb-size);
    width: var(--thumb-size);
    margin-top: var(--thumb-offset);
    border-radius: 50%;
    background: var(--brand-bg-gradient) fixed;
    box-shadow: 0 0 0 var(--thumb-highlight-size) rgba(var(--theme-red-color-rgb), 0.2);

    @media (prefers-reduced-motion: no-preference) {
      transition: box-shadow 0.1s ease;
    }
  }

  &:is(:hover, :active) {
    &:not(:disabled) {
      --thumb-highlight-size: 10px;
    }
  }

  &:disabled {
    --brand-bg-gradient: var(--theme-border-color);
  }
}
