.multi-range-slider {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-6);

  inline-size: 20rem;

  &__body,
  &__slider {
    position: relative;
    inline-size: inherit;
  }

  &__track,
  &__range {
    position: absolute;
    block-size: 0.25rem;
    border-radius: $border-radius-extra-small;
  }

  &__track {
    z-index: 1;
    inline-size: 100%;
    background-color: $color-neutral-6;
  }

  &__range {
    z-index: 2;
    background-color: $color-neutral-10;
  }

  &__thumb {
    @include size(0, inherit);

    position: absolute;
    pointer-events: none;
    outline: none;

    &--z-index--3 {
      z-index: 3;
    }

    &--z-index--4 {
      z-index: 4;
    }

    &--z-index--5 {
      z-index: 5;
    }

    &,
    &::-webkit-slider-thumb {
      appearance: none;
      -webkit-tap-highlight-color: transparent;
    }

    &::-webkit-slider-thumb {
      @include size(1rem, 1rem);

      position: relative;
      margin-block-start: $whitespace-1;
      pointer-events: all;
      cursor: pointer;
      background-color: $color-neutral-10;
      border: 0;
      border-radius: $border-radius-circle;
      box-shadow: get-shadow(extra-small, $color-neutral-10);
    }

    &::-moz-range-thumb {
      @include size(1rem, 1rem);

      position: relative;
      margin-block-start: $whitespace-1;
      pointer-events: all;
      cursor: pointer;
      background-color: $color-neutral-10;
      border: 0;
      border-radius: $border-radius-circle;
      box-shadow: get-shadow(extra-small, $color-neutral-10);
    }
  }

  &__info-panel {
    @include flex(row, nowrap, null, null, space-between);
  }

  &__min-value,
  &__max-value {
    inline-size: 10rem;
    block-size: 4rem;
    padding: $whitespace-3;
    font-size: $font-size-3;
    text-align: center;
    text-transform: uppercase;
    cursor: default;
    border: 0.1rem solid $color-neutral-10;
  }
}