@import 'default-theme';
@import '_variables';

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

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

$md-slider-thumb-default-scale: 0.7 !default;
$md-slider-thumb-focus-scale: 1 !default;

// TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
$md-slider-off-color: rgba(black, 0.26);
$md-slider-focused-color: rgba(black, 0.38);
$md-slider-disabled-color: rgba(black, 0.26);

/**
 * Uses a container height and an item height to center an item vertically within the container.
 */
@function center-vertically($containerHeight, $itemHeight) {
  @return ($containerHeight / 2) - ($itemHeight / 2);
}

/**
 * Positions the thumb based on its width and height.
 */
@mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {
  position: absolute;
  top: center-vertically($md-slider-thickness, $height);
  // This makes it so that the center of the thumb aligns with where the click was.
  // This is not affected by the movement of the thumb.
  left: (-$width / 2);
  width: $width;
  height: $height;
  border-radius: max($width, $height);
}

md-slider {
  height: $md-slider-thickness;
  min-width: $md-slider-min-size;
  position: relative;
  padding: 0;
  display: inline-block;
  outline: none;
  vertical-align: middle;
}

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

/**
 * Exists in order to pad the slider and keep everything positioned correctly.
 * Cannot be merged with the .md-slider-container.
 */
.md-slider-wrapper {
  width: 100%;
  height: 100%;
  padding-left: $md-slider-padding;
  padding-right: $md-slider-padding;
}

/**
 * Holds the isActive and isSliding classes as well as helps with positioning the children.
 * Cannot be merged with .md-slider-wrapper.
 */
.md-slider-container {
  position: relative;
}

.md-slider-track-container {
  width: 100%;
  position: absolute;
  top: center-vertically($md-slider-thickness, $md-slider-track-height);
  height: $md-slider-track-height;
}

.md-slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background-color: $md-slider-off-color;
}

.md-slider-track-fill {
  transition-duration: $swift-ease-out-duration;
  transition-timing-function: $swift-ease-out-timing-function;
  transition-property: width, height;
  background-color: md-color($md-accent);
}

.md-slider-thumb-container {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition-duration: $swift-ease-out-duration;
  transition-timing-function: $swift-ease-out-timing-function;
  transition-property: left, bottom;
}

.md-slider-thumb-position {
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-thumb {
  z-index: 1;

  @include slider-thumb-position($md-slider-thumb-size, $md-slider-thumb-size);
  transform: scale($md-slider-thumb-default-scale);
  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-thumb::after {
  content: '';
  position: absolute;
  width: $md-slider-thumb-size;
  height: $md-slider-thumb-size;
  border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);
  border-width: 3px;
  border-style: solid;
  transition: inherit;
  background-color: md-color($md-accent);
  border-color: md-color($md-accent);
}

.md-slider-sliding .md-slider-thumb-position,
.md-slider-sliding .md-slider-track-fill {
  transition: none;
  cursor: default;
}

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

.md-slider-disabled .md-slider-thumb::after {
  background-color: $md-slider-disabled-color;
  border-color: $md-slider-disabled-color;
}