@slider-prefix: ~'@{icecream-prefix}-slider';

@slider-handle-size: 20px;
@slider-rail-width: 6px;
@slider-padding: (@slider-handle-size - @slider-rail-width) / 2;
@slider-rail-border-radius: 3px;

.@{slider-prefix} {
  .extendBase();

  position: relative;
  cursor: pointer;
  touch-action: none;

  &-rail {
    position: absolute;
    background-color: @icecream-color-grey-3;
    border-radius: @slider-rail-border-radius;
    transition: background-color @icecream-transitions;
  }

  &-track {
    position: absolute;
    background-color: @icecream-primary-color;
    border-radius: @slider-rail-border-radius;
    transition: background-color @icecream-transitions;
  }

  &-handle {
    position: absolute;
    box-sizing: border-box;
    width: @slider-handle-size;
    height: @slider-handle-size;
    background-color: @icecream-white;
    border: solid 1px @icecream-primary-color;
    box-shadow: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
  }

  &-disabled {
    cursor: not-allowed;

    .@{slider-prefix}-track {
      background-color: @icecream-color-grey-5 !important;
    }

    .@{slider-prefix}-handle {
      background-color: @icecream-color-grey-5;
      border-color: @icecream-color-grey-7 !important;
      box-shadow: none;
      cursor: not-allowed;
    }
  }

  &-horizontal {
    width: 100%;
    height: @slider-handle-size;
    margin: @icecream-gap-sm @icecream-gap-xs;
    padding: @slider-padding 0;

    .@{slider-prefix}-rail {
      width: 100%;
      height: @slider-rail-width;
    }

    .@{slider-prefix}-track {
      height: @slider-rail-width;
    }

    .@{slider-prefix}-handle {
      margin-top: -@slider-padding;
    }
  }

  &-vertical {
    width: @slider-handle-size;
    height: 100%;
    margin: @icecream-gap-xs @icecream-gap-sm;
    padding: 0 @slider-padding;

    .@{slider-prefix}-rail {
      width: @slider-rail-width;
      height: 100%;
    }

    .@{slider-prefix}-track {
      width: @slider-rail-width;
    }

    .@{slider-prefix}-handle {
      margin-left: -@slider-padding;
    }
  }
}