@use "../../../../styles/tools/generate";
@use "./mixins";
@use "./config";

@layer components {
  .range-slider {
    $this: &;

    @include mixins.slider();

    @each $width, $props in config.$widths {
      &#{generate.variant-name($width)} {
        @include mixins.slider-width($width);
      }
    }

    &--state-drag * {
      @include mixins.cursor();
    }

    &__touch-area {
      @include mixins.touch-area();
    }

    &__target {
      @include mixins.target();
    }

    &__base,
    &__connects {
      @include mixins.base-and-connects();
    }

    &__base {
      @include mixins.base();
    }

    &__connects {
      @include mixins.connects();
    }

    &__connect {
      @include mixins.connect();
    }

    &__origin {
      @include mixins.origin();
    }

    &__connect,
    &__origin {
      @include mixins.connect-and-origin();

      .range-slider--state-tap & {
        @include mixins.tap-transition();
      }
    }

    &__handle {
      @include mixins.handle();
    }

    &__value {
      @include mixins.value();

      &-sub {
        @include mixins.value-sub();
      }
    }

    &__pips {
      @include mixins.pips();
    }

    &__marker {
      @include mixins.marker();

      &--sub {
        @include mixins.marker-sub();
      }

      &--large {
        @include mixins.marker-large();
      }
    }

    &[disabled]#{$this}__target,
    &[disabled]#{$this}__handle,
    &[disabled] #{$this}__handle {
      @include mixins.disabled();
    }

    &[disabled] #{$this}__connect {
      @include mixins.disabled-connect();
    }
  }
}