@use "../variables" as *;
@use "../mixins" as *;
@use "../utils" as *;

.mie.slider {
  display: block;

  &:not(.range) {
    .range-slider {
      .range-slider__range {
        transform: translate(0, -50%);
        left: 0 !important;

        &::after {
          background: mvar("slider.bg.range");
          width: calc(100% + 0.4rem);
          height: mvar("slider.h");

          position: absolute;
          content: "";
          left: 0;
          top: 0;
        }
      }
    }

    &.vertical {
      [data-vertical] {
        .range-slider__range {
          transform: translate(0, -0.9rem);

          &::after {
            display: none !important;
          }
        }
      }
    }
  }

  .range-slider {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    touch-action: none;

    user-select: none;
    cursor: pointer;

    position: relative;
    display: block;

    max-height: mvar("slider.h");
    min-height: mvar("slider.h");

    min-width: mvar("slider.min.length");
    width: 100%;

    background: mvar("slider.bg.slider");
    border-radius: mvar("slider.h");

    &[data-vertical] {
      min-height: mvar("slider.min.length");
      width: mvar("slider.h");
      min-width: auto;
      height: 100%;

      .range-slider__thumb {
        left: 50%;
      }

      .range-slider__range {
        transform: translate(-50%, 0);
        left: 50%;

        max-width: var(--mie-slider-h);
        width: var(--mie-slider-h);
        max-height: none;
        height: auto;
      }
    }

    &[data-disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }

    .range-slider__thumb {
      border: 0.1rem solid mvar("slider.thumb.border");
      background: mvar("slider.bg.thumb");
      border-radius: 50%;

      transform: translate(-50%, -50%);
      box-sizing: border-box;
      position: absolute;
      z-index: 3;

      height: mvar("slider.thumb");
      width: mvar("slider.thumb");
      top: 50%;

      &:focus-visible {
        box-shadow: 0 0 0.4rem rgba(33, 150, 243, 0.4) inset;
        outline: 0;
      }

      &[data-active] {
        box-shadow: 0 0 0.4rem rgb(0, 0, 0, 0.2) inset;
      }

      &[data-disabled] {
        z-index: -1;
        opacity: 0;
      }
    }

    .range-slider__range {
      background: mvar("slider.bg.range");
      border-radius: mvar("slider.h");
      transform: translate(0, -50%);
      position: absolute;
      z-index: 1;

      max-height: var(--mie-slider-h);
      height: var(--mie-slider-h);

      width: 100%;
      top: 50%;
    }

    input[type="range"] {
      background-color: transparent;
      border: none;

      -webkit-appearance: none;
      pointer-events: none;
      appearance: none;

      position: absolute;
      z-index: 2;

      height: 0;
      width: 0;

      left: 0;
      top: 0;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
      }

      &::-moz-range-thumb {
        height: 0;
        border: 0;
        width: 0;
      }

      &:focus {
        outline: 0;
      }
    }
  }
}
