/** @component slider */

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

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

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

        .#{$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 {
      position: absolute;
      top: -10px;
      z-index: 2;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: -10px;
      white-space: nowrap;
      cursor: pointer;
      background-color: $slider-pointer__background-color;
      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;
        }
      }
    }
  }
}