@use "sass:math";
@import '../../scss/variables.scss';
@import '../../scss/mixins.scss';

// #variables
$s-switch-width:                         1.6667em !default;
$s-switch-height:                        1em !default;
$s-switch-border-width:                  0 !default;
$s-switch-border-color:                  $s-border-color !default;
$s-switch-font-size:                     30px !default;
$s-switch-transition-duration:           $s-transition-duration !default;
$s-switch-bg:                            $s-gray-300 !default;
$s-switch-checked-bg:                    $s-primary !default;

$s-switch-is-loading-pointer-events:     $s-loading-pointer-events !default;
$s-switch-is-loading-cursor:             $s-loading-cursor !default;
$s-switch-is-loading-opacity:            0.6 !default;

$s-switch-thumb-width:                   $s-switch-height !default;
$s-switch-thumb-height:                  $s-switch-height !default;
$s-switch-thumb-border-width:            2px !default;
$s-switch-thumb-border-radius:           50% !default;
$s-switch-thumb-bg:                      #fff !default;
$s-switch-thumb-box-shadow:              none !default;
$s-switch-thumb-transition-duration:     $s-transition-duration !default;
$s-switch-thumb-checked-left:            $s-switch-width - $s-switch-thumb-width !default;

$s-switch-loading-font-size:             .5em !default;
$s-switch-loading-color:                 inherit !default;
// #endvariables

.s-switch {
  position: relative;
  box-sizing: content-box;
  display: inline-flex;
  width: $s-switch-width;
  height: $s-switch-height;
  border: $s-switch-border-width solid $s-switch-border-color;
  border-radius: $s-switch-height;
  font-size: $s-switch-font-size;
  background-color: $s-switch-bg;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  transition: background-color $s-switch-transition-duration,
              border-color $s-switch-transition-duration,
              opacity $s-switch-transition-duration;

  @at-root {
    .s-switch-thumb {
      position: absolute;
      left: 0;
      top: 0;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      width: $s-switch-thumb-width;
      height: $s-switch-thumb-height;
      border: $s-switch-thumb-border-width solid transparent;
      border-radius: $s-switch-thumb-border-radius;
      background-clip: content-box;
      background-color: $s-switch-thumb-bg;
      box-shadow: $s-switch-thumb-box-shadow;
      transition: transform $s-switch-thumb-transition-duration;

      @at-root {
        .s-switch-loading {
          font-size: $s-switch-loading-font-size;
          color: $s-switch-loading-color;
        }
      }
    }
  }
}

// # 开启状态
.s-switch-checked {
  border-color: transparent;
  background-color: $s-switch-checked-bg;
  .s-switch-thumb {
    transform: translateX($s-switch-thumb-checked-left);
  }
}

// # 禁用状态
.s-switch-disabled {
  @include disabled;
}

// # 加载状态
.s-switch-is-loading {
  pointer-events: $s-switch-is-loading-pointer-events;
  opacity: $s-switch-is-loading-opacity;
  cursor: $s-switch-is-loading-cursor;
}