/// Slider
///
/// @group form
///
/// @ignore                       ,--> handle icon
/// @ignore
/// @ignore ===================[  •  ]----------------------------
/// @ignore      `--> progress     `--> handle          `--> ramp
///
/// In JavaScript you should move the progress's `width` and the handle's `left`
/// from 0 to 100%.
///
/// @example scss - usage
///
///   @include k-Slider((
///     colors: (
///       progress: red,
///       progress-disabled: darkgrey,
///       ramp: grey,
///       handle: white,
///       handle-disabled: grey,
///       icon: grey,
///       icon-disabled: white,
///       border: grey,
///     )
///   ));
///
/// @example html
///
///   <div class="k-Slider">
///     <div class="k-Slider__ramp">
///       <div class="k-Slider__progress"></div>
///       <div class="k-Slider__handle">
///         <svg class="k-Slider__handleIcon"></svg>
///       </div>
///     </div>
///   </div>
@mixin k-Slider($slider) {
  @include k-with-module('k-Slider: $slider') {
    $colors: k-map-fetch($slider, 'colors');

    $progress-color: k-color-definition(
      k-map-fetch($colors, 'progress')
    );
    $progress-disabled-color: k-color-definition(
      k-map-fetch($colors, 'progress-disabled')
    );
    $ramp-color: k-color-definition(
      k-map-fetch($colors, 'ramp')
    );
    $handle-color: k-color-definition(
      k-map-fetch($colors, 'handle')
    );
    $handle-disabled-color: k-color-definition(
      k-map-fetch($colors, 'handle-disabled')
    );
    $icon-color: k-color-definition(
      k-map-fetch($colors, 'icon')
    );
    $icon-disabled-color: k-color-definition(
      k-map-fetch($colors, 'icon-disabled')
    );
    $border-color: k-color-definition(
      k-map-fetch($colors, 'border')
    );

    $ramp-height: .2rem;
    $handle-size: 2.5rem;
    $transition-speed: .2s;
    $handle-icon-size: .6rem;

    .k-Slider {
      padding: ($handle-size / 2);

      // a click anywhere on the slider should move it around
      cursor: pointer;

      &.is-grabbing {
        // cursor defined here in rather than on the handle, in case the cursor
        // moves further than the handle
        cursor: -webkit-grabbing;
        cursor: grabbing;
      }

      &.is-disabled {
        cursor: not-allowed;
      }

      // Remove webkit highlight color on tap
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: transparent;
    }

    .k-Slider__ramp {
      position: relative;
      height: $ramp-height;

      background: $ramp-color;

      // We use before and after as a fill-in for the ramp, so that the ramp
      // can still appear to fill 100% of the available space but without the
      // handle going over the left and right sides.
      &:before,
      &:after {
        position: absolute;
        top: 0;
        display: block;
        width: ($handle-size / 2);
        height: 100%;
        content: '';
      }

      &:before {
        left: -($handle-size / 2);
        background: $progress-color;

        .k-Slider.is-disabled & {
          background: $progress-disabled-color;
        }
      }

      &:after {
        right: -($handle-size / 2);
        background: $ramp-color;
      }
    }

    .k-Slider__progress {
      width: 0; // moved by JS from 0 to 100%
      height: 100%;

      background: $progress-color;

      transition: width $transition-speed;

      .k-Slider.is-grabbing & {
        // when we are moving by hand, do not slow down the "width" movement
        transition: none;
      }

      .k-Slider.is-disabled & {
        background: $progress-disabled-color;
      }
    }

    .k-Slider__handle {
      z-index: 1; // go over ramp's :after
      position: absolute;
      left: 0; // moved by JS from 0 to 100%
      top: -($handle-size / 2);

      // to align the icon in its center
      align-items: center;
      justify-content: center;
      display: flex;

      height: $handle-size;
      width: $handle-size;
      margin-left: -($handle-size / 2);

      outline: 0; // hide default outline in favor of our hand-made focus style
      border: 1px solid $border-color;
      border-radius: 50%;
      background: $handle-color;
      box-shadow: 0 k-px-to-rem(2px) k-px-to-rem(4px) 0 rgba(0, 0, 0, .08);

      cursor: -webkit-grab;
      cursor: grab;
      transition: left $transition-speed,
                  box-shadow $transition-speed;

      &:focus,
      .k-Slider.is-grabbing & {
        box-shadow: 0 0 k-px-to-rem(10px) 0 $handle-color;
      }

      .k-Slider.is-grabbing & {
        cursor: inherit;

        // when we are moving by hand, do not slow down the "left" movement
        transition: box-shadow $transition-speed;
      }

      .k-Slider.is-disabled & {
        background: $handle-disabled-color;
        border: none;
        cursor: inherit;
      }
    }

    .k-Slider__handleIcon {
      width: $handle-icon-size;

      fill: $icon-color;

      .k-Slider.is-disabled & {
        fill: $icon-disabled-color;
      }
    }
  }
}