/*
* Slider component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-slider {
  --slider-track-height: 0.25rem;
  --slider-thumb-size: 2rem;
  --slider-button-size: 1.5rem;
  --slider-space: 1rem;
  --slider-line-before: black;
  --slider-line-after: gray;
  --slider-line-before--disabled: dimgray;
  --slider-line-after--disabled: lightgray;
  --slider-marker: var(--slider-line-before);
  --slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
  --slider-marker-width: 0.125rem;

  user-select: none; // Safari / Touch fix
  -webkit-touch-callout: none; // Safari / Touch fix

  // use flex to make sure we have the whole space available
  display: flex;

  font-size: var(--font-size-small);
  line-height: var(--slider-thumb-size);

  &--stretch {
    width: 100%;
  }

  &--vertical {
    display: flex;
    width: auto;
    height: 100%;

    min-width: inherit;
    min-height: inherit;
  }

  &__wrapper {
    display: inline-flex;
    flex-direction: column;

    flex: 1;
    width: 100%;
  }

  &--vertical &__wrapper {
    align-items: center;

    width: auto;
    height: 100%;
  }

  &__inner {
    display: inline-flex;

    // set a height so it's easier to click on the track
    height: var(--slider-thumb-size);
  }

  &__suffix {
    align-self: center;
  }

  &--vertical &__suffix {
    padding-left: 0;
    padding-top: 0.5rem;
  }

  &__marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    margin: auto;
    width: var(--slider-marker-width);
    height: var(--slider-marker-height);
    background-color: var(--slider-marker);

    &:focus {
      outline: none; // we show a Tooltip instead
      @include focusRing();
    }

    // Larger bounding area
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(10, 1);
    }
  }

  &--vertical &__marker {
    top: auto;
    right: 0;
    bottom: auto;
    left: 0;

    height: var(--slider-marker-width);
    width: var(--slider-marker-height);

    &::before {
      transform: scale(1, 10);
    }
  }

  &__track {
    // make sure we do not alow page scroll on touch devices
    touch-action: none;

    position: relative;
    flex: 1;

    // make room again for the negative line manipulation
    margin: 0 calc(var(--slider-space) * 1.5);

    // only to make sure we have a visible track
    min-width: 2rem;

    cursor: pointer;
  }

  &--vertical &__track {
    margin: calc(var(--slider-space) * 1.5) 0;

    // only to make sure we have a visible track
    min-height: 2rem;
    min-width: auto;
  }

  &--no-buttons &__track {
    margin: 0 calc(var(--slider-space));
  }
  &--no-buttons#{&}--vertical &__track {
    margin: calc(var(--slider-space)) 0;
  }

  &--vertical &__inner {
    flex-direction: column;

    // set a width so it's easier to click on the track
    width: var(--slider-thumb-size);
    height: inherit;

    min-width: inherit;
    min-height: inherit;
  }

  &__line {
    position: absolute;

    left: 0;
    top: 50%;

    margin: 0 calc(1px - 1px - var(--slider-space));

    height: var(--slider-track-height);
    transform: translate3d(0, -50%, 0);

    background-color: var(--slider-line-before);
    border-radius: var(--slider-track-height);

    &__before {
      z-index: 2;
    }

    &__after {
      z-index: 1;
      right: 0;
      background-color: var(--slider-line-after);
    }
  }

  &--vertical &__line {
    width: var(--slider-track-height);
    height: auto;

    left: 50%;
    top: 0;

    margin: calc(1px - 1px - var(--slider-space)) 0;

    transform: translate3d(-50%, 0, 0);
  }

  &--vertical &__line__before {
    top: 0;
    bottom: 0;
  }

  &--vertical &__line__after {
    bottom: 0;
  }

  &__thumb {
    @include sharpDropShadow();
  }

  &__button-helper,
  &__thumb {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;

    display: flex;
    justify-content: center;
    transform: translate3d(-50%, 0, 0);

    // Because of the DropShadow
    border-radius: 50%;

    &,
    .dnb-button {
      height: var(--slider-thumb-size);
      width: var(--slider-thumb-size);
    }
  }

  &--vertical &__thumb {
    transform: translate3d(0, -50%, 0);
  }

  &__button.dnb-button--size-small {
    height: var(--slider-button-size);
    width: var(--slider-button-size);

    line-height: var(--slider-button-size);
    transform: translateY(0.25rem);

    z-index: 2;
  }

  &--vertical &__button.dnb-button--size-small {
    transform: translateX(0.25rem);
  }

  &__state--disabled &__track,
  &__state--disabled &__thumb,
  &__state--disabled &__line {
    cursor: not-allowed;
  }

  &__state--animate &__thumb,
  &__state--animate &__line {
    transition:
      left 250ms var(--easing-default),
      top 250ms var(--easing-default),
      bottom 250ms var(--easing-default),
      right 250ms var(--easing-default),
      box-shadow 250ms var(--easing-default);

    @include reducedMotion() {
      transition-duration: 0.01ms;
    }
  }

  html[data-visual-test] &__thumb,
  html[data-visual-test] &__line {
    transition: none !important;
  }

  // make sure the helper is not click able
  &__button-helper {
    pointer-events: none;
    z-index: 2;
    opacity: 0;

    transform: translate3d(0.0625rem, 0, 0);
  }

  &__button-helper:not(:disabled):focus ~ .dnb-button {
    @include focusRing();
  }

  > .dnb-form-label {
    align-self: flex-start;
    margin-right: 1rem;
    line-height: var(--slider-thumb-size);
  }

  > .dnb-form-label--vertical {
    margin-right: 0;
    line-height: var(--line-height-basis);
  }

  &__label--vertical {
    flex-direction: column;
  }
  &__label--vertical#{&}--vertical {
    align-items: center;

    .dnb-form-label {
      text-align: center;
      width: 100%;
      margin-right: 0;
      margin-bottom: 0.5rem;
    }
  }

  // status
  .dnb-form-status {
    order: 2;
    margin-top: 0.5rem;
  }

  &--vertical .dnb-form-status {
    margin-top: 1rem;
  }

  .dnb-responsive-component & {
    @media screen and (max-width: 40em) {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      margin-bottom: 0.5rem;

      > .dnb-form-label {
        margin-bottom: 0.5rem;
      }
    }
  }

  &.dnb-skeleton &__line,
  &.dnb-skeleton &__marker,
  &.dnb-skeleton &__state--disabled &__line {
    background-color: var(--skeleton-color);
  }
  &.dnb-skeleton &__track,
  &.dnb-skeleton &__state--disabled#{&}__track {
    &::before,
    &::after {
      background-color: var(--skeleton-color);
    }
  }
}