@import 'vars';
// var
// ==============================================
$range: rangeUi;
$range-bar-color: $bg-color-base;
$range-pointer-size: 10px;
$range-pointer-bgColor: $color-white;
$range-pointer-borderColor: $input-border;
$range-bar-height: 4px;
$range-selected-color: $brand-primary;
$range-tip-bgColor: $gray-600;
$range-tip-borderColor: $range-tip-bgColor;
$range-tip-arrow-bgColor: $range-tip-bgColor;
$range-lines-color: $input-border;
$range-values-color: $text-color;

// z-index
$range-pointer-z-index: $zindex-base;

// range
// ==============================================
.#{$range} {
  position: relative;
  cursor: pointer;

  &-bar {
    height: $range-bar-height;
    background-color: $range-bar-color;
  }

  &-pointer {
    position: absolute;
    top: -($range-pointer-size - $range-bar-height) / 2;
    left: 60%;
    z-index: 2;
    box-sizing: border-box;
    width: $range-pointer-size;
    height: $range-pointer-size;
    background-color: $range-pointer-bgColor;
    border: 1px solid $range-pointer-borderColor;
    border-radius: 50%;
    // margin-left: -($range-pointer-size + 2)/2;
    transform: translate(-50%, 0%);

    &:focus {
      outline: 0;
      outline: none;
    }
  }

  &-tip {
    position: absolute;
    top: -30px;
    left: 50%;
    display: block;
    padding: 2px 4px 1px;
    margin: 0 auto;
    font-size: 11px;
    line-height: 1.5em;
    color: $color-white;
    text-align: center;
    background-color: $range-tip-bgColor;
    border: 1px solid $range-tip-borderColor;
    border-radius: 2px;
    // @include translate(-50%, 0);
    transform: translate(-50%, 0);

    &:before {
      position: absolute;
      bottom: -3px;
      left: 50%;
      display: inline-block;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      content: "";
      background-color: $range-tip-arrow-bgColor;
      // @include rotate(-45deg);
      transform: rotate(-45deg);
    }
  }

  &-selected {
    position: absolute;
    top: 0;
    width: 60%;
    height: $range-bar-height;
    overflow: hidden;
    background-color: $range-selected-color;
  }

  &-scale {
    height: 30px;

    &-lines, &-values {
      position: relative;
      padding: 0;
      margin: 0;
      vertical-align: middle;
      list-style: none;

      li {
        position: absolute;
        top: 0;
        float: left;
      }
    }

    &-lines {
      top: 6px;

      li {
        position: absolute;
        top: 0;
        width: 1px;
        height: 4px;
        background-color: $range-lines-color;
      }
    }

    &-inlineGrid {
      height: 10px !important;
    }

    &-values {
      top: 13px;
      margin-left: 1px;

      span {
        margin-left: -50%;
        // *position: relative;
        // *display: inline;
        // *zoom: 1;
        font-size: 14px;
        color: $range-values-color;
      }
    }
  }
}