/**
* @name Slider
* @description Range sliders.
* @category controls
* @component slider
*/
@import "../settings/core";
@import "../settings/colors";
@import "../settings/slider";

@include exports('cui-slider') {
  #{$slider__class},
  .#{$slider__class} {
    display: inline-block;
    position: relative;
    height: 2px;
    width: 100%;
    margin: 30px 0 15px;
    vertical-align: middle;
    background-color: inherit;

    span {
      white-space: nowrap;
      position: absolute;
      display: inline-block;

      &.#{$slider__class}__bar {
        width: 100%;
        height: 100%;
        z-index: 0;
        border-radius: 2px;
        background-color: $slider-bar__background-color;

        .#{$dark-class} & {
          background-color: $slider-bar__background-color--dark;
        }
      }

      &.#{$slider__class}__selection {
        z-index: 1;
        height: 100%;
        background-color: $slider-selection__background-color;
      }

      &.#{$slider__class}__selection--red {
        background-color: $slider-selection__background-color--red;
      }

      &.#{$slider__class}__selection--blue {
        background-color: $slider-selection__background-color--green;
      }

      &.#{$prefix}-slider__selection--yellow {
        background-color: $slider-selection__background-color--yellow;
      }

      &.#{$slider__class}__hashlabel {
        top: 15px;
        display: inline-block;
        line-height: 12px;
        color: $slider-hashlabel__color;

        .#{$dark-class} & {
          color: $slider-hashlabel__color--dark;
        }
      }
    }

    .#{$slider__class}__pointer {
      white-space: nowrap;
      position: absolute;
      display: inline-block;
      cursor: pointer;
      width: 20px;
      height: 20px;
      top: -10px;
      margin-left: -10px;
      background-color: $slider-pointer__background-color;
      z-index: 2;
      border-radius: 50%;
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.32);

      &:hover {
        background-color: $slider-pointer__background-color--hover;
      }

      &:focus {
        background-color: $slider-pointer__background-color;
        @include focus-styles;
      }

      .#{$dark-class} & {
        &:focus {
          background-color: $slider-pointer__background-color--focus--dark;
          @include focus-styles;
        }
      }
    }
  }

  .#{$slider__class}--disabled {
    span {
      &.#{$slider__class}__selection {
        background-color: $slider-selection__background-color--disabled;

        .#{$dark-class} & {
          background-color: $slider-selection__background-color--disabled--dark;
        }
      }
    }

    .#{$slider__class}__pointer {
      cursor: not-allowed;
      background-color: $slider-pointer__background-color--disabled;

      &:hover,
      &:focus {
        background-color: $slider-pointer__background-color--disabled;
        border: none;
      }

      .#{$dark-class} & {
        background-color: $slider-pointer__background-color--disabled--dark;

        &:hover,
        &:focus {
          background-color: $slider-pointer__background-color--disabled--dark;
          border: none;
        }
      }

    }

  }
}


/**
* @component slider
* @section default
* @html
<div class="cui-slider ">
  <span class="cui-slider__bar"></span>
  <span class="cui-slider__selection" style="width: 20.2%; left: 0%;"></span>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(20.2%);"></div>
  <div>
    <span class="cui-slider__hashlabel" style="left: calc(0% - 5px);">0</span>
    <span class="cui-slider__hashlabel" style="left: calc(20% - 14.5px);">100</span>
    <span class="cui-slider__hashlabel" style="left: calc(40% - 14.5px);">200</span>
    <span class="cui-slider__hashlabel" style="left: calc(60% - 14.5px);">300</span>
    <span class="cui-slider__hashlabel" style="left: calc(80% - 14.5px);">400</span>
    <span class="cui-slider__hashlabel" style="left: calc(100% - 14.5px);">500</span>
  </div>
</div>
*/

/**
* @component slider
* @section two-handles
* @html
<div class="cui-slider ">
  <span class="cui-slider__bar"></span>
  <span class="cui-slider__selection" style="width: 23.2%; left: 19.8%;"></span>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(19.8%);"></div>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(43%);"></div>
  <div>
    <span class="cui-slider__hashlabel" style="left: calc(0% - 5px);">0</span>
    <span class="cui-slider__hashlabel" style="left: calc(20% - 14.5px);">100</span>
    <span class="cui-slider__hashlabel" style="left: calc(40% - 14.5px);">200</span>
    <span class="cui-slider__hashlabel" style="left: calc(60% - 14.5px);">300</span>
    <span class="cui-slider__hashlabel" style="left: calc(80% - 14.5px);">400</span>
    <span class="cui-slider__hashlabel" style="left: calc(100% - 14.5px);">500</span>
  </div>
</div>
*/


/**
* @component slider
* @section cross
* @html
<div class="cui-slider ">
  <span class="cui-slider__bar"></span>
  <span class="cui-slider__selection" style="width: 10%; left: 40%;"></span>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(50%);"></div>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(40%);"></div>
  <div>
    <span class="cui-slider__hashlabel" style="left: calc(0% - 5px);">0</span>
    <span class="cui-slider__hashlabel" style="left: calc(20% - 14.5px);">100</span>
    <span class="cui-slider__hashlabel" style="left: calc(40% - 14.5px);">200</span>
    <span class="cui-slider__hashlabel" style="left: calc(60% - 14.5px);">300</span>
    <span class="cui-slider__hashlabel" style="left: calc(80% - 14.5px);">400</span>
    <span class="cui-slider__hashlabel" style="left: calc(100% - 14.5px);">500</span>
  </div>
</div>
*/


/**
* @component slider
* @section step
* @html
<div class="cui-slider ">
  <span class="cui-slider__bar"></span>
  <span class="cui-slider__selection" style="width: 10%; left: 30%;"></span>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(30%);"></div>
  <div class="cui-slider__pointer" role="button" tabindex="0" style="left: calc(40%);"></div>
  <div>
    <span class="cui-slider__hashlabel" style="left: calc(0% - 4px);">0</span>
    <span class="cui-slider__hashlabel" style="left: calc(20% - 12px);">100</span>
    <span class="cui-slider__hashlabel" style="left: calc(40% - 12px);">200</span>
    <span class="cui-slider__hashlabel" style="left: calc(60% - 12px);">300</span>
    <span class="cui-slider__hashlabel" style="left: calc(80% - 12px);">400</span>
    <span class="cui-slider__hashlabel" style="left: calc(100% - 12px);">500</span>
  </div>
</div>
*/