@import '../shared-styles/index';

$handle-diameter: nx-spacer(m);
$value-width: nx-spacer(4m);
$value-height: nx-spacer(m);
$arrow-size: 1.5 * nx-spacer(3xs);
$value-border: nx-border-size(xs) solid;
$value-top: -($value-height + nx-spacer(s));
$background-height: nx-spacer(3xs);
$wrapper-padding-top: (($handle-diameter - $background-height) * 0.5) + $value-height + 2 *
  nx-spacer(s);
$wrapper-padding-bottom: (($handle-diameter - $background-height) * 0.5) + nx-spacer(2xs);

:host {
  display: block;
}

.nx-slider__label {
  @include type-style(slider-label);
  color: v(slider-label-color);
}

.nx-slider__wrapper {
  display: flex;
  padding-top: $wrapper-padding-top;
  padding-bottom: 36px;
}

.nx-slider__slide {
  position: relative;
  flex: auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.nx-slider__background {
  position: relative;
  background-color: v(slider-background-color);
  display: block;
  height: nx-spacer(3xs);
  border-radius: nx-border-radius(xs);
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
}

.nx-slider__tick-container {
  margin-top: 13px;
  display: flex;
  border-left: 1px solid v(slider-tick-color);
  border-right: 1px solid v(slider-tick-color);
  height: 9px;
  align-items: center;
  overflow: hidden;
}

.nx-slider__tick {
  height: 5px;
  display: flex;
  border-right: 1px solid v(slider-tick-color);

  &.nx-slider__tick-primary {
    height: 9px;
  }
  &.nx-slider__tick-hidden {
    border: none;
  }
}

.nx-slider__filler {
  display: inline-block;
  height: $background-height;
  border-radius: nx-border-radius(xs);
  background-color: v(slider-indicator-color);
  float: left;
  position: relative;

  :host-context([dir='rtl']) & {
    float: right;
  }
}

.nx-slider__handle {
  position: absolute;
  width: $handle-diameter;
  height: $handle-diameter;
  right: 0;
  transform: translateX(50%);
  border-radius: 50%;
  box-shadow: v(shadow-small);
  border-style: solid;
  border-width: nx-border-size(xs);
  border-color: v(slider-handle-border-color);
  background: v(slider-handle-background-color);
  box-sizing: border-box;
  top: -(($handle-diameter - $background-height) * 0.5);
  z-index: 2;
  cursor: grab;

  :host-context([dir='rtl']) & {
    left: 0;
    right: auto;
    transform: translateX(-50%);
  }

  &:focus {
    outline: none;
    border-color: v(slider-handle-focus-border-color);
  }

  &:active {
    box-shadow:
      v(shadow-small),
      inset 0 0 0 4px v(slider-handle-background-color),
      inset 0 0 0 $handle-diameter v(slider-handle-active-inset-color);
    cursor: grabbing;
  }

  &.cdk-keyboard-focused {
    border-color: v(slider-handle-focus-border-color);
    @include focus-style;
  }
}

.nx-slider__value {
  display: block;
  position: absolute;
  @include type-style(slider-handle-value);
  color: v(slider-handle-value-color);
  border: $value-border;
  border-color: v(slider-handle-border-color);
  border-radius: nx-border-radius(s);
  box-shadow: v(shadow-small);
  cursor: grab;
  height: $value-height;
  min-width: $value-width;
  text-align: center;
  $padding-top-bottom: (nx-spacer(3xs) - nx-border-size(xs));
  padding: $padding-top-bottom nx-spacer(2xs);
  top: $value-top;
  background: v(slider-value-background-color);
  left: calc(#{$handle-diameter} / 2);
  transform: translateX(-50%);

  &:active {
    cursor: grabbing;
  }
}

.nx-slider__arrow {
  width: $arrow-size;
  height: $arrow-size;
  border-right: $value-border;
  border-bottom: $value-border;
  left: 50%;
  top: $value-top + $value-height - $arrow-size;
  transform: translate(-50%, 3px) rotate(45deg);
  position: absolute;
  box-shadow:
    -2px -2px 1px 1px v(slider-value-background-color),
    2px 2px 4px v(shadow-small-color);
  background: v(slider-value-background-color);
  border-color: v(slider-handle-border-color);
}

.nx-slider__label-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  @include type-style(slider-value-label);
  color: v(slider-value-label-color);

  .nx-slider__has-ticks & {
    margin-top: 16px;
  }
}

.nx-slider__max-value-label {
  text-align: right;
}

:host(.nx-slider--disabled) {
  cursor: not-allowed;

  .nx-slider__filler,
  .nx-slider__value,
  .nx-slider__value-label,
  .nx-slider__handle,
  .nx-slider__background {
    pointer-events: none;
    cursor: not-allowed;
  }

  .nx-slider__value,
  .nx-slider__handle {
    background-color: v(slider-value-disabled-background-color);
  }

  .nx-slider__filler {
    background-color: v(slider-indicator-disabled-color);
  }

  .nx-slider__value {
    color: v(slider-handle-value-disabled-color);
  }

  .nx-slider__label-container {
    color: v(slider-value-label-disabled-color);
  }

  .nx-slider__arrow {
    background: v(slider-value-disabled-background-color);
    box-shadow:
      -2px -2px 1px 1px v(slider-value-disabled-background-color),
      nx-spacer(4xs) nx-spacer(4xs) nx-spacer(3xs) rgba(65, 65, 65, 0.5);
  }

  .nx-slider__background {
    background: v(slider-disabled-background-color);
  }
}

// negative styles
:host(.nx-slider--negative) {
  .nx-slider__label,
  .nx-slider__value-label {
    color: v(negative);
  }

  .nx-slider__filler {
    background-color: v(negative);
  }

  .nx-slider__background {
    background-color: v(slider-negative-background-color);
  }
}

// negative disabled styles
:host(.nx-slider--negative.nx-slider--disabled) {
  .nx-slider__label,
  .nx-slider__value-label {
    color: v(negative-01);
  }

  .nx-slider__filler {
    background-color: v(negative-01);
  }
}

@media screen and (forced-colors: active) {
  .nx-slider__background {
    background-color: buttonFace;
    border: nx-border-size(xs) solid buttonText;
  }
  .nx-slider__filler {
    background-color: highlight;
  }

  .nx-slider__handle {
    background-color: buttonFace;
    border-color: buttonText;

    &:hover,
    &:focus {
      background-color: highlight;
    }

    &:active {
      background-color: buttonText;
    }
  }

  .nx-slider__value {
    border-color: buttonText;
    color: buttonText;
  }

  :host(.nx-slider--disabled) {
    .nx-slider__background {
      background-color: Canvas;
      border: nx-border-size(xs) solid GrayText;
    }

    .nx-slider__filler {
      background-color: GrayText;
    }

    .nx-slider__handle {
      background-color: GrayText;
    }

    .nx-slider__value {
      border-color: GrayText;
      color: GrayText;
    }

    .nx-slider__arrow {
      border-color: GrayText;
    }
  }

  :host.nx-slider--negative.nx-slider--disabled {
    .nx-slider__filler {
      background-color: GrayText;
    }
  }
}

.nx-slider__appendix {
  align-items: center;
  white-space: nowrap;
  margin-left: nx-spacer(s);
  display: flex;
  height: 0;

  // ensure auto sized icons get 24px and don't inherit 20px from the base font size of this component
  ::ng-deep nx-icon.nx-icon--auto {
    font-size: v(slider-icon-size);
  }

  ::ng-deep nx-icon {
    display: block;
  }
}
