@import url(../var.less);
@import url(./input-number.less);
@import url(./tooltip.less);
@import url(../mixins/utils.less);

@slider-prefix: ~"@{prefix}slider";

.@{slider-prefix}{
  .utils-clearfix();

  &__runway {
    width: 100%;
    height: @slider-height;
    margin: @slider-margin;
    background-color: @slider-runway-background-color;
    border-radius: @slider-border-radius;
    position: relative;
    cursor: pointer;
    vertical-align: middle;

    &.show-input {
      margin-right: 160px;
      width: auto;
    }

    &.disabled {
      cursor: default;

      .w-slider__bar {
        background-color: @slider-disable-color;
      }

      .w-slider__button {
        border-color: @slider-disable-color;
      }

      .w-slider__button-wrapper {
        &:hover,
        &.hover {
          cursor: not-allowed;
        }

        &.dragging {
          cursor: not-allowed;
        }
      }

      .w-slider__button {
        &:hover,
        &.hover,
        &.dragging {
          transform: scale(1);
        }

        &:hover,
        &.hover {
          cursor: not-allowed;
        }

        &.dragging {
          cursor: not-allowed;
        }
      }
    }
  }

  &__input {
    float: right;
    margin-top: 3px;
    width: 130px;

    &.w-input-number--mini {
      margin-top: 5px;
    }

    &.w-input-number--medium {
      margin-top: 0;
    }

    &.w-input-number--large {
      margin-top: -2px;
    }
  }

  &__bar {
    height: @slider-height;
    background-color: @slider-main-background-color;
    border-top-left-radius: @slider-border-radius;
    border-bottom-left-radius: @slider-border-radius;
    position: absolute;
  }

  &__button-wrapper {
    height: @slider-button-wrapper-size;
    width: @slider-button-wrapper-size;
    position: absolute;
    z-index: 1001;
    top: @slider-button-wrapper-offset;
    transform: translateX(-50%);
    background-color: transparent;
    text-align: center;
    user-select: none;
    line-height: normal;
    .utils-vertical-center();

    .w-tooltip {
      vertical-align: middle;
      display: inline-block;
    }

    &:hover,
    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: grabbing;
    }
  }

  &__button {
    width: @slider-button-size;
    height: @slider-button-size;
    border: solid 3px @slider-main-background-color;
    background-color: @color-white;
    border-radius: 50%;
    transition: .2s;
    user-select: none;

    &:hover,
    &.hover,
    &.dragging {
      transform: scale(1.2);
    }

    &:hover,
    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: grabbing;
    }
  }

  &__stop {
    position: absolute;
    top: -2px;
    height: @slider-height;
    width: @slider-height;
    border: 2px solid @disabled-placeholder-color;
    border-radius: @border-radius-circle;
    background-color: @slider-stop-background-color;
    transform: translateX(-50%);
  }

  &__marks {
    top: 0;
    left: 12px;
    width: 18px;
    height: 100%;

    .w-slider__marks-text {
      position: absolute;
      transform: translateX(-50%);
      font-size: 14px;
      color: @info-color;
      margin-top: 15px;
    }
  }

  &.is-vertical {
    position: relative;
    .w-slider__runway {
      width: @slider-height;
      height: 100%;
      margin: 0 16px;
    }
    .w-slider__bar {
      width: @slider-height;
      height: auto;
      border-radius: 0 0 3px 3px;
    }
    .w-slider__button-wrapper {
      top: auto;
      left: @slider-button-wrapper-offset;
      transform: translateY(50%);
    }
    .w-slider__stop {
      transform: translateY(50%);
      top: unset;
      left: -2px;
    }

    &.w-slider--with-input {
      padding-bottom: @input-height + 22px;

      .w-slider__input {
        overflow: visible;
        float: none;
        position: absolute;
        bottom: 10px;
        width: 36px;
        margin-top: 15px;
        .w-input__inner {
          text-align: center;
          padding-left: 5px;
          padding-right: 5px;
        }
        .w-input-number__decrease,
        .w-input-number__increase
        {
          top: @input-height;
          margin-top: -1px;
          border: @input-border;
          line-height: 20px;
          box-sizing: border-box;
          transition: @border-transition-base;
        }
        .w-input-number__decrease {
          width: 18px;
          right: 18px;
          bottom: unset;
          border-bottom-left-radius: @input-radius;
          border-right: 0;
        }
        .w-input-number__increase {
          width: 18px;
          border-bottom-right-radius: @input-radius;
          & ~ .w-input .w-input__inner {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
        &:hover {
          .w-input-number__decrease,
          .w-input-number__increase
          {
            border-color: @input-hover-border;
          }
        }
        &:active {
          .w-input-number__decrease,
          .w-input-number__increase
          {
            border-color: @input-focus-border;
          }
        }
      }

      .is-controls-both-sides {
        .w-input-number__decrease {
          left: 0;
          width: 19px;
        }
        .w-input-number__increase {
          width: 19px;
        }
      }
    }

    .w-slider__marks-text {
      margin-top: 0;
      left: 15px;
      transform: translateY(50%);
    }
  }
}