@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Field.scss" as *;

@mixin cx-slider(
   $name: "slider",
   $state-style-map: $cx-input-state-style-map,
   $styles: $cx-slider-handle-styles,
   $width: $cx-default-input-width,
   $size: $cx-default-slider-handle-size,
   $axis-size: $cx-default-slider-axis-size,
   $axis-background-color: $cx-default-slider-axis-background-color,
   $range-background-color: $cx-default-slider-range-background-color,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   .#{$block}#{$name} {
      width: $width;
      user-select: none;

      @include cxb-field($besm, $state-style-map, $input: false, $box: true);

      &.#{$state}vertical {
         width: 28px;
         height: $width;
      }

      &.#{$state}disabled {
         pointer-events: none;
         opacity: 0.5;
      }
   }

   .#{$element}#{$name}-axis {
      position: absolute;
      background-color: $axis-background-color;
      border-radius: cx-multiply($size, 0.5);
      box-sizing: border-box;

      .#{$block}#{$name}.#{$state}horizontal & {
         left: cx-multiply($size, 0.5);
         right: cx-multiply($size, 0.5);
         top: calc(50% - #{cx-multiply($axis-size, 0.5)});
         height: $axis-size;
         padding: 0 cx-multiply($axis-size, 0.5);
      }

      .#{$block}#{$name}.#{$state}vertical & {
         top: cx-multiply($size, 0.5);
         bottom: cx-multiply($size, 0.5);
         width: $axis-size;
         left: calc(50% - #{cx-multiply($axis-size, 0.5)});
         padding: cx-multiply($axis-size, 0.5) 0;
      }
   }

   .#{$element}#{$name}-space {
      position: relative;
      width: 100%;
      height: 100%;
   }

   .#{$element}#{$name}-range {
      position: absolute;

      background-color: $range-background-color;
      border-radius: cx-multiply($axis-size, 0.5);

      .#{$block}#{$name}.#{$state}horizontal & {
         height: 100%;
      }

      .#{$block}#{$name}.#{$state}vertical & {
         width: 100%;
      }
   }

   .#{$element}#{$name}-handle {
      position: absolute;
      box-sizing: border-box;
      width: $size;
      height: $size;
      margin-left: cx-multiply($size, -0.5);
      margin-top: cx-multiply($size, -0.5);
      margin-bottom: cx-multiply($size, -0.5);
      touch-action: none;

      @include cx-add-state-rules($styles, default);

      .#{$block}#{$name}.#{$state}horizontal & {
         left: 0;
         top: 50%;
      }

      .#{$block}#{$name}.#{$state}vertical & {
         left: 50%;
      }

      &:hover {
         @include cx-add-state-rules($styles, hover);
      }

      &:focus {
         @include cx-add-state-rules($styles, focus);
      }

      &[disabled] {
         @include cx-add-state-rules($styles, disabled);
      }

      &:active {
         @include cx-add-state-rules($styles, active);
      }
   }
}

@if (cx-should-include("cx/widgets/Slider")) {
   @include cx-slider();
}