@use "sass:math";
@use "sass:map";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/clockwise.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-switch(
   $name: "switch",
   $state-style-map: $cx-input-state-style-map,
   $styles: $cx-switch-handle-styles,
   $width: $cx-default-switch-width,
   $handle-size: $cx-default-switch-handle-size,
   $axis-size: $cx-default-switch-axis-size,
   $axis-background-color: $cx-default-switch-axis-background-color,
   $range-background-color: $cx-default-switch-range-background-color,
   $empty-text: $cx-empty-text,
   $besm: $cx-besm
) {
   $block: map.get($besm, block);
   $element: map.get($besm, element);
   $state: map.get($besm, state);

   $padding: cx-get-state-rule($state-style-map, default, padding);
   $border-width: cx-get-state-rule($state-style-map, default, border-width);

   $outer-styles: cx-deep-map-merge(
      $state-style-map,
      (
         default: (
            border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
            padding: cx-top($padding) 0 cx-bottom($padding) 0,
         ),
      )
   );

   .#{$block}#{$name} {
      cursor: pointer;
      min-width: cx-calc($width, $handle-size);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      @include cxb-field($besm, $outer-styles, $input: false, $box: true);

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

      &:focus {
         outline: none;
      }
   }

   .#{$element}#{$name}-text {
      display: inline-block;
      margin-left: cx-calc($width, $handle-size);
      padding: 0 cx-right($padding) 0 cx-left($padding);
   }

   .#{$element}#{$name}-empty-text {
      @include cxe-field-empty-text($empty-text);
   }

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

      left: cx-multiply($handle-size, 0.5);
      right: cx-multiply($handle-size, 0.5);
      top: calc(50% - #{cx-multiply($axis-size, 0.5)});
      height: $axis-size;
      padding: 0 cx-multiply($axis-size, 0.5);
   }

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

   .#{$element}#{$name}-range {
      position: absolute;
      background-color: $range-background-color;
      border-radius: cx-multiply($axis-size, 0.5);
      height: 100%;
      left: 0;
      width: 0;
      opacity: 0;
      transform: scale(0);

      transition: all 200ms;

      .#{$state}on & {
         width: 100%;
         opacity: 1;
         transform: none;
      }
   }

   .#{$element}#{$name}-handle {
      position: absolute;
      box-sizing: border-box;
      width: $handle-size;
      height: $handle-size;
      margin-left: cx-multiply($handle-size, -0.5);
      margin-top: cx-multiply($handle-size, -0.5);
      left: 0;
      top: 50%;
      transition: left 200ms;

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

      .#{$state}on & {
         left: 100%;
         @include cx-add-state-rules($styles, on);
      }

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

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

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

      .#{$block}#{$name}.#{$state}disabled & {
         @include cx-add-state-rules($styles, disabled);
      }

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

@if (cx-should-include("cx/widgets/Switch")) {
   @include cx-switch();
}