@use 'sass:map';

@include b(slider) {
  --#{$rd-prefix}slider-color-rgb: var(--#{$rd-prefix}color-primary-rgb);

  position: relative;
  cursor: pointer;

  @include when(disabled) {
    pointer-events: none;
    filter: opacity(50%);
  }

  @include m(horizontal) {
    width: calc(100% - 14px);
    padding: 8px 0;
    margin: 0 7px;

    @include e(thumb) {
      width: 100%;
      height: 4px;
    }

    @include e(active-thumb) {
      top: 0;
      height: 100%;

      @include when(focus) {
        transform: scaleY(1.35);
      }

      @include m(draggable) {
        &:hover {
          transform: scaleY(1.35);
        }
      }
    }

    @include e(input-wrapper) {
      top: -5px;
    }

    @include e(mark) {
      top: 9px;
    }

    @include e(mark-label) {
      top: 6px;
      left: 1px;
      transform: translateX(-50%);
    }
  }

  @include m(vertical) {
    display: inline-block;
    height: calc(100% - 14px);
    padding: 0 8px;
    margin: 7px 0;

    @include e(thumb) {
      width: 4px;
      height: 100%;
    }

    @include e(active-thumb) {
      left: 0;
      width: 100%;

      @include when(focus) {
        transform: scaleX(1.35);
      }

      @include m(draggable) {
        &:hover {
          transform: scaleX(1.35);
        }
      }
    }

    @include e(input-wrapper) {
      left: -5px;
    }

    @include e(mark) {
      left: 9px;
    }

    @include e(mark-label) {
      top: 1px;
      left: 10px;
      transform: translateY(-50%);
    }
  }

  @include e(thumb) {
    position: relative;
    background-color: var(--#{$rd-prefix}background-color-indicator);
    /* stylelint-disable-next-line declaration-property-value-allowed-list */
    border-radius: 2px;

    @include m(reverse) {
      transform: rotate(180deg);
    }
  }

  @include e(active-thumb) {
    position: absolute;
    background-color: rgb(var(--#{$rd-prefix}slider-color-rgb));
    border-radius: inherit;

    @include m(draggable) {
      transition: transform var(--#{$rd-prefix}animation-duration-fast) linear;
    }
  }

  @include e(mark) {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: map.get($rd-colors, 'white');
    border-radius: 50%;

    @include m(hidden) {
      background-color: transparent;
    }
  }

  @include e(mark-label) {
    position: absolute;
    font-size: 0.9em;
    opacity: 0.5;
    transition: opacity var(--#{$rd-prefix}animation-duration-fast) linear;

    @include when(active) {
      opacity: 1;
    }
  }

  @include e(input-wrapper) {
    position: absolute;
    z-index: 1;
    width: 14px;
    height: 14px;
    background-color: var(--#{$rd-prefix}background-color);
    border: solid 2px rgb(var(--#{$rd-prefix}slider-color-rgb));
    border-radius: 50%;
    transition: box-shadow var(--#{$rd-prefix}animation-duration-fast) linear;

    &:hover {
      box-shadow: 0 0 0 6px rgb(var(--#{$rd-prefix}slider-color-rgb) / var(--#{$rd-prefix}shadow-normal));
    }

    @include when(focus) {
      z-index: 5;
      box-shadow: 0 0 0 6px rgb(var(--#{$rd-prefix}slider-color-rgb) / var(--#{$rd-prefix}shadow-normal));
    }
  }

  @include e(input) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
    cursor: pointer;
    border: none;
    opacity: 0;
    appearance: none;
  }
}