/**
name: Range slider
type: ui
modifiers:
  --single: Singe slider
examples:
	- name: Range slider
	  tmpl:
	  	  include: range-slider.html
	- name: Single slider
	  tmpl:
	  	  include: single-slider.html
*/

.range-slider {
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  &__container {
    height: $xsmall-spacing-unit;
    position: relative;
    background: $color-smoke-grey;
    border-radius: $xsmall-spacing-unit / 2;
    margin-bottom: 8px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2) inset;
  }

  &__points {
    @include gradient-vertical($start-color: #0296e5, $end-color: #038cd6);
    position: absolute;
    border-radius: 2px 0 0 2px;
    height: 100%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2) inset;
  }
  &.disabled {
    .range-slider__point {
      background: #f5f5f5;
      &.hover,&.dragging {
        cursor: not-allowed;
      }
    }
  }
  &.disabled,&__points {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#888888));
    background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #888888 100%);
    background-image: linear-gradient(to bottom, #e8e8e8 0%, #888888 100%);
    background-repeat: repeat-x;
  }
  &__point {
    width: 15px;
    height: 15px;
    margin-top: -7px;
    border-radius: 50%;
    cursor: pointer;
    background: $color-white;
    border: 0;
    box-shadow: 0 0 0 1px $color-steel-grey, 0 1px $xsmall-spacing-unit 0 rgba(0, 0, 0, .25);
    outline: none;

    &--from {
      float: left;
      margin-left: -11px;

      .range-slider--single & {
        display: none;
      }
    }

    &--to {
      float: right;
      margin-right: -8px;
    }

    &.hover {
      cursor: grab;
    }

    &.dragging {
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }
  }

  &__values {
    list-style: none;
    margin: 0;
    padding: 0;
    @if $enable-ie9 {
      display: flex;
    } @else {
      display: table;
    }
    width: 100%;

    position: relative;
    color: $color-stone-grey;
    font-size: 11px;
    line-height: 13px;

    li {
      list-style: none;
      @if $enable-ie9 {
        flex: 1;
      } @else {
        display: table-cell;
      }
      text-align: right;

      &:first-child {
        position: absolute;
        left: -4px;
        text-align: left;

        .range-slider__value--empty {
          &:before {
            border-right: none;
            border-left: $border;
          }
        }
      }

      &:last-child {
        .range-slider__value,
        .range-slider__value--empty {
          span {
            transform: translate(-85%, 0);
          }
          &:before {
            left: auto;
            right: 0;
          }
        }
      }
    }
  }

  &__value-label {
    display: block;
    margin-bottom: 2px;
  }

  &__value {
    &--empty {
      position: relative;
      padding-top: 14px;
      display: inline-block;
      height: 20px;
      left: 8px;
      &:before {
        border-right: $border;
        width: 1px;
        margin-left: -1px;
        background: $color-silver-grey;
        content: " ";
        height: 8px;
        position: absolute;
        left: 50%;
        top: 0;
      }
    }
  }

  &values {
    li{
      &:last-child {
        .range-slider__value--empty{
          left: 0
        }
      }
    }
  }
  &--single {
    cursor: pointer;

    .range-slider__select--from {
      display: none;
    }
  }
  .tooltip--blue {
    padding: 4px 10px;
    text-align: center;
    min-width: 36px;
  }

  .range-slider--select {
    .range-slider__points {
      background: linear-gradient(180deg, #02a962, #008e52);
    }
  }
}