.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) {
    height: 2px;
  }

  &#{&}--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);
  }
}