:host,
input[type='range']:not(:host *) {
  --thumb-color: var(--wa-form-control-activated-color);
  --thumb-gap: calc(var(--thumb-size) * 0.125);
  --thumb-shadow: initial;
  --thumb-size: calc(1rem * var(--wa-form-control-value-line-height));

  --track-color-active: var(--wa-color-neutral-fill-normal);
  --track-color-inactive: var(--wa-color-neutral-fill-normal);
  --track-active-offset: 0%;
  --track-height: calc(var(--thumb-size) * 0.25);

  display: flex;
  flex-direction: column;
  position: relative;
}

input[type='range'] {
  --percent: 0%;
  -webkit-appearance: none;
  border-radius: calc(var(--track-height) / 2);
  width: 100%;
  height: var(--track-height);
  line-height: var(--wa-form-control-height);
  vertical-align: middle;
  margin: 0;
  --dir: right;

  background-image: linear-gradient(
    to var(--dir),
    var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
    var(--track-color-active) min(var(--percent), var(--track-active-offset)),
    var(--track-color-active) max(var(--percent), var(--track-active-offset)),
    var(--track-color-inactive) max(var(--percent), var(--track-active-offset))
  );

  &:dir(rtl) {
    --dir: left;
  }

  &::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--track-height);
    border-radius: 3px;
    border: none;
  }

  &::-webkit-slider-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    border-radius: 50%;
    background-color: var(--thumb-color);
    box-shadow:
      var(--thumb-shadow, 0 0 transparent),
      0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
    -webkit-appearance: none;
    margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
  }

  &:enabled {
    &:focus-visible::-webkit-slider-thumb {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    &::-webkit-slider-thumb {
      cursor: pointer;
    }

    &::-webkit-slider-thumb:active {
      cursor: grabbing;
    }
  }

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

  &::-moz-range-progress {
    background-color: var(--track-color-active);
    border-radius: 3px;
    height: var(--track-height);
  }

  &::-moz-range-track {
    width: 100%;
    height: var(--track-height);
    background-color: var(--track-color-inactive);
    border-radius: 3px;
    border: none;
  }

  &::-moz-range-thumb {
    height: var(--thumb-size);
    width: var(--thumb-size);
    border-radius: 50%;
    background-color: var(--thumb-color);
    box-shadow:
      var(--thumb-shadow, 0 0 transparent),
      0 0 0 var(--thumb-gap) var(--wa-color-surface-default);
    transition-property: background-color, border-color, box-shadow, color;
    transition-duration: var(--wa-transition-normal);
    transition-timing-function: var(--wa-transition-easing);
  }

  &:enabled {
    &:focus-visible::-moz-range-thumb {
      outline: var(--wa-focus-ring);
      outline-offset: var(--wa-focus-ring-offset);
    }

    &::-moz-range-thumb {
      cursor: pointer;
    }

    &::-moz-range-thumb:active {
      cursor: grabbing;
    }
  }
}

/* States */
/* nesting these styles yields broken results in Safari */

input[type='range']:focus {
  outline: none;
}

:host :has(:disabled) input[type='range'],
input[type='range']:not(:host *):disabled {
  opacity: 0.5;
  cursor: not-allowed;

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