@import '../core/style/variables';
@import '../core/style/vendor-prefixes';
@import '../../cdk/a11y/a11y';


// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
// vertical slider this is the width.
$mat-slider-thickness: 48px !default;
$mat-slider-min-size: 128px !default;
$mat-slider-padding: 8px !default;

$mat-slider-track-thickness: 2px !default;
$mat-slider-thumb-size: 20px !default;
$mat-slider-thumb-border-width: 3px !default;
$mat-slider-thumb-border-width-active: 2px !default;
$mat-slider-thumb-border-width-disabled: 4px !default;

$mat-slider-thumb-default-scale: 0.7 !default;
$mat-slider-thumb-focus-scale: 1 !default;
$mat-slider-thumb-disabled-scale: 0.5 !default;

$mat-slider-thumb-arrow-gap: 12px !default;

$mat-slider-thumb-label-size: 28px !default;

$mat-slider-tick-size: 2px !default;

$mat-slider-focus-ring-size: 30px !default;


.mat-slider {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: $mat-slider-padding;
  outline: none;
  vertical-align: middle;

  &:not(.mat-slider-disabled):active,
  &.mat-slider-sliding:not(.mat-slider-disabled) {
    @include cursor-grabbing;
  }
}

.mat-slider-wrapper {
  position: absolute;
}

.mat-slider-track-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.mat-slider-track-fill {
  position: absolute;
  transform-origin: 0 0;
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.mat-slider-track-background {
  position: absolute;
  transform-origin: 100% 100%;
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.mat-slider-ticks-container {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.mat-slider-ticks {
  background-repeat: repeat;
  background-clip: content-box;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
}

.mat-slider-thumb-container {
  position: absolute;
  z-index: 1;
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
}

.mat-slider-focus-ring {
  position: absolute;
  width: $mat-slider-focus-ring-size;
  height: $mat-slider-focus-ring-size;
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
              opacity $swift-ease-out-duration $swift-ease-out-timing-function;

  .mat-slider.cdk-keyboard-focused &,
  .mat-slider.cdk-program-focused & {
    transform: scale(1);
    opacity: 1;
  }
}

%_mat-slider-cursor {
  .mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) & {
    @include cursor-grab;
  }
}

.mat-slider-thumb {
  @extend %_mat-slider-cursor;

  position: absolute;
  right: -$mat-slider-thumb-size / 2;
  bottom: -$mat-slider-thumb-size / 2;
  box-sizing: border-box;
  width: $mat-slider-thumb-size;
  height: $mat-slider-thumb-size;
  border: $mat-slider-thumb-border-width solid transparent;
  border-radius: 50%;
  transform: scale($mat-slider-thumb-default-scale);
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color $swift-ease-out-duration $swift-ease-out-timing-function,
              border-color $swift-ease-out-duration $swift-ease-out-timing-function;
}

.mat-slider-thumb-label {
  @extend %_mat-slider-cursor;

  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: $mat-slider-thumb-label-size;
  height: $mat-slider-thumb-label-size;
  border-radius: 50%;
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function,
              border-radius  $swift-ease-out-duration $swift-ease-out-timing-function,
              background-color  $swift-ease-out-duration $swift-ease-out-timing-function;

  @include cdk-high-contrast {
    outline: solid 1px;
  }
}

.mat-slider-thumb-label-text {
  z-index: 1;
  opacity: 0;
  transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
}


// Slider sliding state.
.mat-slider-sliding {
  .mat-slider-track-fill,
  .mat-slider-track-background,
  .mat-slider-thumb-container {
    // Must use `transition-duration: 0ms` to disable animation rather than `transition: none`.
    // On Mobile Safari `transition: none` causes the slider thumb to appear stuck.
    transition-duration: 0ms;
  }
}


// Slider with ticks when not disabled.
.mat-slider-has-ticks {

  .mat-slider-wrapper::after {
    content: '';
    position: absolute;
    border-width: 0;
    border-style: solid;
    opacity: 0;
    transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
  }

  &.cdk-focused,
  &:hover {
    &:not(.mat-slider-hide-last-tick) {
      .mat-slider-wrapper::after {
        opacity: 1;
      }
    }

    &:not(.mat-slider-disabled) .mat-slider-ticks {
      opacity: 1;
    }
  }
}


// Slider with thumb label.
.mat-slider-thumb-label-showing {
  .mat-slider-focus-ring {
    display: none;
  }

  .mat-slider-thumb-label {
    display: flex;
  }
}


// Inverted slider.
.mat-slider-axis-inverted {
  .mat-slider-track-fill {
    transform-origin: 100% 100%;
  }

  .mat-slider-track-background {
    transform-origin: 0 0;
  }
}


// Active slider.
.mat-slider:not(.mat-slider-disabled) {
  &.cdk-focused {
    &.mat-slider-thumb-label-showing .mat-slider-thumb {
      transform: scale(0);
    }

    .mat-slider-thumb-label {
      border-radius: 50% 50% 0;
    }

    .mat-slider-thumb-label-text {
      opacity: 1;
    }
  }

  &.cdk-mouse-focused,
  &.cdk-touch-focused,
  &.cdk-program-focused {
    .mat-slider-thumb {
      border-width: $mat-slider-thumb-border-width-active;
      transform: scale($mat-slider-thumb-focus-scale);
    }
  }
}


// Disabled slider.
.mat-slider-disabled {
  .mat-slider-focus-ring {
    transform: scale(0);
    opacity: 0;
  }

  .mat-slider-thumb {
    border-width: $mat-slider-thumb-border-width-disabled;
    transform: scale($mat-slider-thumb-disabled-scale);
  }

  .mat-slider-thumb-label {
    display: none;
  }
}


// Horizontal slider.
.mat-slider-horizontal {
  height: $mat-slider-thickness;
  min-width: $mat-slider-min-size;

  .mat-slider-wrapper {
    height: $mat-slider-track-thickness;
    top: ($mat-slider-thickness - $mat-slider-track-thickness) / 2;
    left: $mat-slider-padding;
    right: $mat-slider-padding;
  }

  .mat-slider-wrapper::after {
    height: $mat-slider-track-thickness;
    border-left-width: $mat-slider-tick-size;
    right: 0;
    top: 0;
  }

  .mat-slider-track-wrapper {
    height: $mat-slider-track-thickness;
    width: 100%;
  }

  .mat-slider-track-fill {
    height: $mat-slider-track-thickness;
    width: 100%;
    transform: scaleX(0);
  }

  .mat-slider-track-background {
    height: $mat-slider-track-thickness;
    width: 100%;
    transform: scaleX(1);
  }

  .mat-slider-ticks-container {
    height: $mat-slider-track-thickness;
    width: 100%;

    @include cdk-high-contrast {
      height: 0;
      outline: solid $mat-slider-track-thickness;
      top: $mat-slider-track-thickness / 2;
    }
  }

  .mat-slider-ticks {
    height: $mat-slider-track-thickness;
    width: 100%;
  }

  .mat-slider-thumb-container {
    width: 100%;
    height: 0;
    top: 50%;
  }

  .mat-slider-focus-ring {
    top: -$mat-slider-focus-ring-size / 2;
    right: -$mat-slider-focus-ring-size / 2;
  }

  .mat-slider-thumb-label {
    right: -$mat-slider-thumb-label-size / 2;
    top: -($mat-slider-thumb-label-size + $mat-slider-thumb-arrow-gap);
    transform: translateY($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap)
        scale(0.01)
        rotate(45deg);
  }

  .mat-slider-thumb-label-text {
    transform: rotate(-45deg);
  }

  &.cdk-focused {
    .mat-slider-thumb-label {
      transform: rotate(45deg);
    }

    @include cdk-high-contrast {
      .mat-slider-thumb-label,
      .mat-slider-thumb-label-text {
        transform: none;
      }
    }
  }
}


// Vertical slider.
.mat-slider-vertical {
  width: $mat-slider-thickness;
  min-height: $mat-slider-min-size;

  .mat-slider-wrapper {
    width: $mat-slider-track-thickness;
    top: $mat-slider-padding;
    bottom: $mat-slider-padding;
    left: ($mat-slider-thickness - $mat-slider-track-thickness) / 2;
  }

  .mat-slider-wrapper::after {
    width: $mat-slider-track-thickness;
    border-top-width: $mat-slider-tick-size;
    bottom: 0;
    left: 0;
  }

  .mat-slider-track-wrapper {
    height: 100%;
    width: $mat-slider-track-thickness;
  }

  .mat-slider-track-fill {
    height: 100%;
    width: $mat-slider-track-thickness;
    transform: scaleY(0);
  }

  .mat-slider-track-background {
    height: 100%;
    width: $mat-slider-track-thickness;
    transform: scaleY(1);
  }

  .mat-slider-ticks-container {
    width: $mat-slider-track-thickness;
    height: 100%;

    @include cdk-high-contrast {
      width: 0;
      outline: solid $mat-slider-track-thickness;
      left: $mat-slider-track-thickness / 2;
    }
  }

  .mat-slider-focus-ring {
    bottom: -$mat-slider-focus-ring-size / 2;
    left: -$mat-slider-focus-ring-size / 2;
  }

  .mat-slider-ticks {
    width: $mat-slider-track-thickness;
    height: 100%;
  }

  .mat-slider-thumb-container {
    height: 100%;
    width: 0;
    left: 50%;
  }

  .mat-slider-thumb {
    @include backface-visibility(hidden);
  }

  .mat-slider-thumb-label {
    bottom: -$mat-slider-thumb-label-size / 2;
    left: -($mat-slider-thumb-label-size + $mat-slider-thumb-arrow-gap);
    transform: translateX($mat-slider-thumb-label-size / 2 + $mat-slider-thumb-arrow-gap)
        scale(0.01)
        rotate(-45deg);
  }

  .mat-slider-thumb-label-text {
    transform: rotate(45deg);
  }

  &.cdk-focused {
    .mat-slider-thumb-label {
      transform: rotate(-45deg);
    }
  }
}


// Slider in RTL languages.
[dir='rtl'] {
  .mat-slider-wrapper::after {
    left: 0;
    right: auto;
  }

  .mat-slider-horizontal {
    .mat-slider-track-fill {
      transform-origin: 100% 100%;
    }

    .mat-slider-track-background {
      transform-origin: 0 0;
    }

    &.mat-slider-axis-inverted {
      .mat-slider-track-fill {
        transform-origin: 0 0;
      }

      .mat-slider-track-background {
        transform-origin: 100% 100%;
      }
    }
  }
}

// Slider inside a component with disabled animations.
.mat-slider._mat-animation-noopable {
  .mat-slider-track-fill,
  .mat-slider-track-background,
  .mat-slider-ticks,
  .mat-slider-thumb-container,
  .mat-slider-focus-ring,
  .mat-slider-thumb,
  .mat-slider-thumb-label,
  .mat-slider-thumb-label-text,
  .mat-slider-has-ticks .mat-slider-wrapper::after {
    transition: none;
  }
}