.slider {
  & :global(.wsr-slider) {
    height: calc(2px + 2 * 4px);
  }

  &#{&}--has-gradient :global(.wsr-slider) {
    height: calc(2px + 2 * 4px);
  }

  & :global(.wsr-slider.wsr-slider-vertical) {
    width: calc(2px + 2 * 4px);
    height: 100%;
  }

  &#{&}--has-gradient :global(.wsr-slider.wsr-slider-vertical) {
    width: calc(2px + 2 * 4px);
    height: 100%;
  }

  & :global(.wsr-slider-with-marks) {
    height: calc(2px + 2 * 4px + 6px + var(--wds-space-200) + 12px + 18px);
  }

  &#{&}--has-gradient :global(.wsr-slider-with-marks) {
    height: calc(2px + 2 * 4px + 6px + var(--wds-space-200) + 12px + 18px);
  }

  & :global(.wsr-slider-rail) {
    background-color: var(--wds-color-fill-dark-secondary-hover);
    height: 2px;
  }

  & :global(.wsr-slider-disabled .wsr-slider-rail) {
    background-color: var(--wds-color-black-700);
  }

  &#{&}--has-gradient :global(.wsr-slider-rail) {
    height: 2px;
  }

  & :global(.wsr-slider.wsr-slider-vertical .wsr-slider-rail) {
    width: 2px;
    height: 100%;
  }

  &#{&}--has-gradient :global(.wsr-slider.wsr-slider-vertical .wsr-slider-rail) {
    width: 2px;
    height: 100%;
  }

  & :global(.wsr-slider-track) {
    height: 2px;
  }

  & :global(.wsr-slider.wsr-slider-vertical .wsr-slider-track) {
    width: 2px;
    height: 100%;
  }

  & :global(.wsr-slider-mark) {
    top: calc(2px + var(--wds-space-200) + 4px + 6px);
  }

  &#{&}--has-gradient :global(.wsr-slider-mark) {
    top: calc(2px + var(--wds-space-200) + 4px + 6px);
  }

  & :global(.wsr-slider.wsr-slider-vertical .wsr-slider-mark) {
    top: 0;
    left: calc(2px + var(--wds-space-200) + 4px + 6px);
  }

  &#{&}--has-gradient :global(.wsr-slider.wsr-slider-vertical .wsr-slider-mark) {
    top: 0;
    left: calc(2px + var(--wds-space-200) + 4px + 6px);
  }

  & :global(.wsr-slider-step) {
    height: 2px;
  }

  &#{&}--has-gradient :global(.wsr-slider-step) {
    height: 2px;
  }

  & :global(.wsr-slider.wsr-slider-vertical .wsr-slider-step) {
    width: 2px;
    height: 100%;
  }

  &#{&}--has-gradient :global(.wsr-slider.wsr-slider-vertical .wsr-slider-step) {
    width: 2px;
    height: 100%;
  }

  &#{&}--horizontal .slider-handle {
    height: calc(2px + 2 * 4px);
  }

  &#{&}--horizontal#{&}--has-gradient .slider-handle {
    height: calc(2px + 2 * 4px);
  }

  &:not(&--horizontal) .slider-handle {
    width: calc(2px + 2 * 4px);
  }

  &:not(&--horizontal)#{&}--has-gradient .slider-handle {
    width: calc(2px + 2 * 4px);
  }

  & &__mark-line {
    height: var(--wds-space-200);
  }

  :global(.wsr-slider.wsr-slider-vertical) &__mark-line {
    height: 1px;
    width: var(--wds-space-200);
  }
}

.slider-handle {
  & &__thumb {
    width: 8px;
    height: 8px;
    border-width: 2px;
    background-color: var(--wds-color-fill-standard-tertiary);
    transition: transform 100ms linear;
  }

  &#{&}--disabled &__thumb {
    background-color: var(--wds-color-fill-standard-tertiary);
  }

  &#{&}--hovered:not(&--disabled) &__thumb {
    background-color: var(--wds-color-fill-standard-tertiary);
    transform: none;
  }

  &#{&}--has-gradient &__thumb {
    border: none;
    width: var(--wds-slider-slider-knob-size-transparent, 16px);
    height: var(--wds-slider-slider-knob-size-transparent, 16px);
  }

  &#{&}--has-gradient#{&}--hovered:not(&--disabled) &__thumb {
    transform: none;
  }

  &:not(&--disabled) &__handle:active &__thumb {
    border-color: var(--wds-color-fill-standard-primary-hover);
    background-color: var(--wds-color-fill-standard-tertiary);
    transform: scale(1.5);
  }

  &#{&}--has-gradient:not(&--disabled) &__handle:active &__thumb {
    transform: scale(1.375);
  }

  @media (prefers-reduced-motion) {
    & &__thumb {
      transition: none;
    }
  }
}