$slider-background-color:  rgb(200, 200, 200) !default;
$slider-size:  48px !default;
$slider-min-size:  128px !default;

$slider-track-height:  2px !default;
$slider-thumb-width:  20px !default;
$slider-thumb-height:  $slider-thumb-width !default;

$slider-thumb-default-scale: 0.7 !default;
$slider-thumb-hover-scale: 0.8 !default;
$slider-thumb-focus-scale: 1 !default;
$slider-thumb-disabled-scale: 0.5 !default;
$slider-thumb-disabled-border: 4px !default;
$slider-thumb-focus-duration: .7s !default;

$slider-focus-thumb-width:  34px !default;
$slider-focus-thumb-height: $slider-focus-thumb-width !default;
$slider-focus-ring-border-width: 3px !default;

$slider-arrow-height: 16px !default;
$slider-arrow-width: 28px !default;

$slider-sign-height: 28px !default;
$slider-sign-width: 28px !default;
$slider-sign-top: ($slider-size / 2) - ($slider-thumb-default-scale * $slider-thumb-height / 2) - ($slider-sign-height) - ($slider-arrow-height) + 10px !default;

@keyframes sliderFocusThumb {
  0% {
    transform: scale($slider-thumb-default-scale);
  }
  30% {
    transform: scale($slider-thumb-focus-scale);
  }
  100% {
    transform: scale($slider-thumb-default-scale);
  }
}

@keyframes sliderDiscreteFocusThumb {
  0% {
    transform: scale($slider-thumb-default-scale);
  }
  50% {
    transform: scale($slider-thumb-hover-scale);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes sliderDiscreteFocusRing {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
  }
}

@mixin slider-thumb-position($width: $slider-thumb-width, $height: $slider-thumb-height) {
  position: absolute;
  @include rtl-prop(left, right, (-$width / 2), auto);
  top: ($slider-size / 2) - ($height / 2);
  width: $width;
  height: $height;
  border-radius: max($width, $height);
}

md-slider {
  height: $slider-size;
  min-width: $slider-min-size;
  position: relative;
  margin-left: 4px;
  margin-right: 4px;
  padding: 0;
  display: block;
  flex-direction: row;

  *, *:after {
    box-sizing: border-box;
  }

  .md-slider-wrapper {
    outline: none;
    width: 100%;
    height: 100%;
  }

  .md-slider-content {
    position: relative;
  }

  /**
   * Track
   */
  .md-track-container {
    width: 100%;
    position: absolute;
    top: ($slider-size / 2) - ($slider-track-height) / 2;
    height: $slider-track-height;
  }
  .md-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
  }
  .md-track-fill {
    transition: all .4s cubic-bezier(.25,.8,.25,1);
    transition-property: width, height;
  }
  .md-track-ticks {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
  }
  .md-track-ticks canvas {
    // Restrict the width and the height of the canvas so that ticks are rendered correctly
    // when parent elements are resized. Else, the position of the ticks might
    // be incorrect as we only update the canvas width attribute on window resize.
    width: 100%;
    height: 100%;
  }

  /**
   * Slider thumb
   */
  .md-thumb-container {
    position: absolute;
    @include rtl-prop(left, right, 0, auto);
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    transition: all .4s cubic-bezier(.25,.8,.25,1);
    transition-property: left, right, bottom;
  }
  .md-thumb {
    z-index: 1;

    @include slider-thumb-position($slider-thumb-width, $slider-thumb-height);

    // We render thumb in an :after selector to fix an obscure problem with the
    // thumb being clipped by the focus-ring and focus-thumb while running the focus
    // animation.
    &:after {
      content: '';
      position: absolute;
      width: $slider-thumb-width;
      height: $slider-thumb-height;
      border-radius: max($slider-thumb-width, $slider-thumb-height);
      border-width: 3px;
      border-style: solid;
      transition: inherit;
    }

    transform: scale($slider-thumb-default-scale);
    transition: all .4s cubic-bezier(.25,.8,.25,1);
  }

  /* The sign that's focused in discrete mode */
  .md-sign {

    /* Center the children (slider-thumb-text) */
    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    left: -($slider-sign-height / 2);
    top: $slider-sign-top;
    width: $slider-sign-width;
    height: $slider-sign-height;
    border-radius: max($slider-sign-height, $slider-sign-width);

    transform: scale(0.4) translate3d(0,(-$slider-sign-top + 10) / 0.4,0);
    transition: all 0.3s $swift-ease-in-out-timing-function;

    /* The arrow pointing down under the sign */
    &:after {
      position: absolute;
      content: '';
      @include rtl-prop(left, right, -($slider-sign-width / 2 - $slider-arrow-width / 2), auto);
      border-radius: $slider-arrow-height;
      top: 19px;
      border-left: $slider-arrow-width / 2 solid transparent;
      border-right: $slider-arrow-width / 2 solid transparent;
      border-top-width: $slider-arrow-height;
      border-top-style: solid;

      opacity: 0;
      transform: translate3d(0,-8px,0);
      transition: all 0.2s $swift-ease-in-out-timing-function;
    }

    .md-thumb-text {
      z-index: 1;
      font-size: 12px;
      font-weight: bold;
    }
  }

  /**
   * The border/background that comes in when focused in non-discrete mode
   */
  .md-focus-ring {
    @include slider-thumb-position($slider-focus-thumb-width, $slider-focus-thumb-height);
    transform: scale(.7);
    opacity: 0;
    // using a custom duration to match the spec example video
    transition: all ($slider-thumb-focus-duration / 2) $swift-ease-in-out-timing-function;
  }
  .md-disabled-thumb {
    @include slider-thumb-position(
      $slider-thumb-width + $slider-thumb-disabled-border * 2,
      $slider-thumb-height + $slider-thumb-disabled-border * 2
    );
    transform: scale($slider-thumb-disabled-scale);
    border-width: $slider-thumb-disabled-border;
    border-style: solid;
    display: none;
  }

  &.md-min {
    .md-sign {
      opacity: 0;
    }
  }

  &:focus {
    outline: none;
  }

  /* Don't animate left/right while panning */
  &.md-dragging {
    .md-thumb-container,
    .md-track-fill {
      transition: none;
    }
  }

  &:not([md-discrete]) {
    /* Hide the sign and ticks in non-discrete mode */
    .md-track-ticks,
    .md-sign {
      display: none;
    }

    &:not([disabled]) {
      .md-slider-wrapper {
        .md-thumb:hover {
          transform: scale($slider-thumb-hover-scale);
        }

        &.md-focused {
          .md-focus-ring {
            transform: scale(1);
            opacity: 1;
          }
          .md-thumb {
            animation: sliderFocusThumb $slider-thumb-focus-duration $swift-ease-in-out-timing-function;
          }
        }
      }

      &.md-active {
        .md-slider-wrapper {
          .md-thumb {
            transform: scale($slider-thumb-focus-scale);
          }
        }
      }
    }
  }

  &[md-discrete] {
    &:not([disabled]) {
      .md-slider-wrapper {
        &.md-focused {
          .md-focus-ring {
            transform: scale(0);
            animation: sliderDiscreteFocusRing .5s $swift-ease-in-out-timing-function;
          }
          .md-thumb {
            animation: sliderDiscreteFocusThumb .5s $swift-ease-in-out-timing-function;
          }
        }
      }
      .md-slider-wrapper.md-focused,
      &.md-active {
        .md-thumb {
          transform: scale(0);
        }
        .md-sign,
        .md-sign:after {
          opacity: 1;
          transform: translate3d(0,0,0) scale(1.0);
        }
      }
    }

    &[disabled][readonly] {
      .md-thumb {
        transform: scale(0);
      }
      .md-sign,
      .md-sign:after {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1.0);
      }
    }
  }

  &[disabled] {
    .md-track-fill {
      display: none;
    }
    .md-track-ticks {
      opacity: 0;
    }
    &:not([readonly]) .md-sign {
      opacity: 0;
    }
    .md-thumb {
      transform: scale($slider-thumb-disabled-scale);
    }
    .md-disabled-thumb {
      display: block;
    }
  }

  &[md-vertical] {
    flex-direction: column;
    min-height: $slider-min-size;
    min-width: 0;

    .md-slider-wrapper {
      flex: 1;
      padding-top: 12px;
      padding-bottom: 12px;
      width: $slider-size;
      align-self: center;
      display: flex;
      justify-content: center;
    }

    .md-track-container {
      height: 100%;
      width: $slider-track-height;
      top: 0;
      left: calc(50% - (#{$slider-track-height} / 2));
    }

    .md-thumb-container {
      top: auto;
      margin-bottom: ($slider-size / 2) - ($slider-track-height) / 2;
      left: calc(50% - 1px);
      bottom: 0;

      .md-thumb:after {
        left: 1px;
      }

      .md-focus-ring {
        left: -(($slider-focus-thumb-width / 2) - ($slider-track-height / 2));
      }
    }

    .md-track-fill {
      bottom: 0;
    }

    &[md-discrete] {
      .md-sign {
        $sign-top: -($slider-sign-top / 2) + 1;

        left: -$slider-sign-height - 12;
        top: $sign-top;

        transform: scale(0.4) translate3d((-$slider-sign-top + 10) / 0.4, 0 ,0);

        /* The arrow pointing left next the sign */
        &:after {
          top: $sign-top;
          left: 19px;
          border-top: $slider-arrow-width / 2 solid transparent;
          border-right: 0;
          border-bottom: $slider-arrow-width / 2 solid transparent;
          border-left-width: $slider-arrow-height;
          border-left-style: solid;

          opacity: 0;
          transform: translate3d(0,-8px,0);
          transition: all 0.2s ease-in-out;
        }

        .md-thumb-text {
          z-index: 1;
          font-size: 12px;
          font-weight: bold;
        }
      }

      &.md-active,
      .md-focused,
      &[disabled][readonly]{
        .md-sign:after {
          top: 0;
        }
      }
    }

    &[disabled][readonly] {
      .md-thumb {
        transform: scale(0);
      }
      .md-sign,
      .md-sign:after {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1.0);
      }
    }
  }
  &[md-invert] {
    &:not([md-vertical]) .md-track-fill {
      @include rtl(left, auto, 0);
      @include rtl(right, 0, auto);
    }
    &[md-vertical] {
      .md-track-fill {
        bottom: auto;
        top: 0;
      }
    }
  }
}

md-slider-container {
  display: flex;
  align-items: center;
  flex-direction: row;

  $items-width: 25px;
  $items-height: $items-width;
  $items-margin: 16px;

  & > *:first-child,
  & > *:last-child {
    &:not(md-slider){
      min-width: $items-width;
      max-width: ($items-width * 2) - 8;
      height: $items-height;
      transition: $swift-ease-out;
      transition-property: color, max-width;
    }
  }

  & > *:first-child:not(md-slider) {
    @include rtl-prop(margin-right, margin-left, $items-margin, auto);
  }

  & > *:last-child:not(md-slider) {
    @include rtl-prop(margin-left, margin-right, $items-margin, auto);
  }

  &[md-vertical] {
    flex-direction: column;

    & > *:first-child:not(md-slider),
    & > *:last-child:not(md-slider) {
      margin-right: 0;
      margin-left: 0;
      text-align: center;
    }
  }

  md-input-container {
    input[type="number"] {
      text-align: center;
      @include rtl-prop(padding-left, padding-right, 15px, 0); // size of arrows
      height: $items-height * 2;
      margin-top: -$items-height;
    }
  }
}

@media screen and (-ms-high-contrast: active) {
  md-slider.md-default-theme .md-track {
    border-bottom: 1px solid #fff;
  }
}