@import "./range";
@import "./range.md.vars";

// Material Design Range
// --------------------------------------------------

:host {
  --knob-border-radius: 50%;
  --knob-background: #{$range-md-knob-background-color};
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #{$range-md-bar-height};
  --bar-background: #{$range-md-bar-background-color};
  --height: #{$range-md-slider-height};

  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);

  font-family: $range-md-font-family;
  font-size: $range-md-pin-font-size;
}

// TODO: REVIEW
// .range-md [slot="range-start"] {
//   @include margin(0, 12px, 0, 0);
// }

// .range-md [slot="range-end"] {
//   @include margin(0, 0, 0, 12px);
// }

:host(.range-has-pin) {
  @include padding($range-md-padding-vertical + $range-md-pin-font-size + $range-md-pin-padding-vertical, null, null, null);
}

.range-bar-active {
  bottom: 0;

  width: auto;

  background: $range-md-bar-active-background-color;
}

.range-knob {
  transform: scale(.67);

  transition-duration: 120ms;
  transition-property: transform, background-color, border;
  transition-timing-function: ease;

  z-index: 2;
}

.range-tick {
  @include margin-horizontal(-($range-md-tick-width / 2), null);
  @include border-radius($range-md-tick-border-radius);

  position: absolute;
  top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2);

  width: $range-md-tick-width;
  height: $range-md-tick-height;

  background: $range-md-tick-background-color;

  z-index: 1;
  pointer-events: none;
}

.range-tick-active {
  background: $range-md-tick-active-background-color;
}

.range-pin {
  @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal);
  @include border-radius(50%);
  @include transform(translate3d(0, 28px, 0), scale(.01));

  display: inline-block;
  position: relative;
  top: -20px;

  min-width: 28px;
  height: 28px;

  transition: transform 120ms ease, background-color 120ms ease;

  text-align: center;

  &::before {
    @include position(3px, null, null, 50%);
    @include border-radius(50%, 50%, 50%, 0);
    @include margin-horizontal(-13px, null);

    position: absolute;

    width: 26px;
    height: 26px;

    transform: rotate(-45deg);

    transition: background-color 120ms ease;

    background: $range-md-pin-background-color;

    content: "";
    z-index: -1;
  }
}

.range-knob-pressed .range-pin {
  @include transform(translate3d(0, 0, 0), scale(1));
}

:host(:not(.range-has-pin)) .range-knob-pressed .range-knob {
  transform: scale(1);
}

.range-knob-min.range-knob-min {
  .range-knob {
    border: $range-md-knob-min-border;

    background: $range-md-knob-min-background-color;
  }

  .range-pin,
  .range-pin::before {
    background: $range-md-pin-min-background-color;
    color: ion-color(primary, contrast);
  }
}

:host(.range-disabled) .range-bar-active {
  background-color: $range-md-bar-background-color;
}

:host(.range-disabled) .range-knob {
  transform: scale(.55);

  outline: 5px solid #fff;

  background-color: $range-md-bar-background-color;
}