@use '@style/theme/index.scss' as theme;
@use '@style/theme/index.scss' as global;
@use 'sass:string';
@use '@components/switch/style/token.scss' as *;

$switch-prefix-cls: string.unquote('#{theme.$prefix}-switch');

$switch-size-default-gap: (($switch-size-default - $switch-size-dot-default) * 0.5);
$switch-size-small-gap: (($switch-size-small - $switch-size-dot-small) * 0.5);

$switch-size-default-line-gap: (($switch-size-default - $switch-line-size-dot-default) * 0.5);
$switch-size-small-line-gap: (($switch-size-small - $switch-line-size-dot-small) * 0.5);

.switch-slide-text-enter-from {
  left: -100% !important;
}

.switch-slide-text-enter-to {
  left: 8px !important;
}

.switch-slide-text-enter-active {
  transition: left theme.$transition-duration-2 theme.$transition-timing-function-standard;
}

.switch-slide-text-leave-from {
  left: 100% !important;
}

.switch-slide-text-leave-to {
  left: $switch-size-dot-default + $switch-size-default-gap + 6px !important;
}

.switch-slide-text-leave-active {
  transition: left theme.$transition-duration-2 theme.$transition-timing-function-standard;
}

.#{$switch-prefix-cls} {
  position: relative;
  box-sizing: border-box;
  min-width: $switch-circle-default-width;
  height: $switch-size-default;
  padding: 0;
  overflow: hidden;
  line-height: $switch-size-default;
  vertical-align: middle;
  background-color: $switch-color-bg_off;
  border: none;
  border-radius: ($switch-size-default * 0.5);
  outline: none;
  cursor: pointer;
  transition: background-color theme.$transition-duration-2
    theme.$transition-timing-function-standard;

  &-handle {
    position: absolute;
    top: $switch-size-default-gap;
    left: $switch-size-default-gap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: $switch-size-dot-default;
    height: $switch-size-dot-default;
    color: $switch-color-dot-icon_off;
    font-size: 12px;
    background-color: $switch-color-dot-bg;
    border-radius: 50%;
    // 滑块位移依赖 left（相对父级定位），暂保留 left 过渡；颜色同步过渡
    transition:
      left theme.$transition-duration-2 theme.$transition-timing-function-standard,
      color theme.$transition-duration-2 theme.$transition-timing-function-standard;
  }

  &-checked {
    background-color: $switch-color-bg_on;
  }

  &-checked &-handle {
    left: calc(100% - $switch-size-dot-default - $switch-size-default-gap);
    color: $switch-color-dot-icon_on;
  }

  &[disabled] &-handle {
    color: $switch-color-dot-icon_off_disabled;
  }

  &[disabled]#{&}-checked &-handle {
    color: $switch-color-dot-icon_on_disabled;
  }

  &[disabled] &-handle {
    color: $switch-color-dot-icon_off_disabled;
  }

  &[disabled]#{&}-checked &-handle {
    color: $switch-color-dot-icon_on_disabled;
  }

  &-text-holder {
    margin: 0 8px 0 $switch-size-dot-default + $switch-size-default-gap + 6px;
    font-size: $switch-font-size-text;
    opacity: 0;
  }

  &-text {
    position: absolute;
    top: 0;
    left: $switch-size-dot-default + $switch-size-default-gap + 6px;
    color: $switch-color-text_off;
    font-size: $switch-font-size-text;
  }

  &-checked &-text-holder {
    margin: 0 $switch-size-dot-default + $switch-size-default-gap + 6px 0 8px;
  }

  &-checked &-text {
    left: 8px;
    color: $switch-color-text_on;
  }

  // Disabled
  &[disabled] {
    background-color: $switch-color-bg_off_disabled;
    cursor: not-allowed;
  }

  &[disabled] &-text {
    color: $switch-color-text_off_disabled;
  }

  &[disabled]#{&}-checked {
    background-color: $switch-color-bg_on_disabled;
  }

  &[disabled]#{&}-checked &-text {
    color: $switch-color-text_on_disabled;
  }

  // Loading
  &-loading {
    background-color: $switch-color-bg_off_loading;
  }

  &-loading &-handle {
    color: $switch-color-dot-icon_off_loading;
  }

  &-loading &-text {
    color: $switch-color-text_off_loading;
  }

  &-loading#{&}-checked {
    background-color: $switch-color-bg_on_loading;
  }

  &-loading#{&}-checked &-handle {
    color: $switch-color-dot-icon_on_loading;
  }

  &-loading#{&}-checked &-text {
    color: $switch-color-text_on_loading;
  }

  &-small {
    min-width: $switch-circle-small-width;
    height: $switch-size-small;
    line-height: $switch-size-small;
  }

  &-small#{&}-checked {
    padding-left: -$switch-size-small-gap;
  }

  &-small &-handle {
    top: $switch-size-small-gap;
    left: $switch-size-small-gap;
    width: $switch-size-dot-small;
    height: $switch-size-dot-small;
    border-radius: ($switch-size-small * 0.5);

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.66667);
    }
  }

  &-small#{&}-checked &-handle {
    left: calc(100% - $switch-size-dot-small - $switch-size-small-gap);
  }
}

// Round
.#{$switch-prefix-cls} {
  &-type-round {
    min-width: $switch-round-default-width;
    border-radius: global.$radius-small;
  }

  &-type-round &-handle {
    border-radius: 2px;
  }

  &-type-round#{&}-small {
    min-width: $switch-round-small-width;
    height: $switch-size-small;
    line-height: $switch-size-small;
    border-radius: 2px;
  }

  &-type-round#{&}-small &-handle {
    border-radius: 1px;
  }
}

// Line
.#{$switch-prefix-cls} {
  &-type-line {
    min-width: $switch-line-default-width;
    overflow: unset;
    background-color: transparent;

    &::after {
      display: block;
      width: 100%;
      height: $switch-line-height-bg-line;
      background-color: $switch-color-bg_off;
      border-radius: ($switch-line-height-bg-line * 0.5);
      transition: background-color theme.$transition-duration-2
        theme.$transition-timing-function-standard;
      content: '';
    }
  }

  &-type-line &-handle {
    top: $switch-size-default-line-gap;
    left: 0;
    width: $switch-line-size-dot-default;
    height: $switch-line-size-dot-default;
    background-color: $switch-color-dot-bg;
    border-radius: ($switch-line-size-dot-default * 0.5);
    box-shadow: 0 1px 3px $switch-line-color-dot-shadow;
  }

  &-type-line#{&}-checked {
    background-color: transparent;

    &::after {
      background-color: $switch-color-bg_on;
    }
  }

  &-type-line#{&}-custom-color {
    --custom-color: $switch-color-bg_off;

    &::after {
      background-color: var(--custom-color);
    }
  }

  &-type-line#{&}-custom-color#{&}-checked {
    --custom-color: $switch-color-bg_on;
  }

  &-type-line#{&}-checked &-handle {
    left: calc(100% - $switch-line-size-dot-default);
  }

  // Disabled
  &-type-line[disabled] {
    background-color: transparent;
    cursor: not-allowed;

    &::after {
      background-color: $switch-color-bg_off_disabled;
    }
  }

  &-type-line[disabled]#{&}-checked {
    background-color: transparent;

    &::after {
      background-color: $switch-color-bg_on_disabled;
    }
  }

  // Loading
  &-type-line#{&}-loading {
    background-color: transparent;

    &::after {
      background-color: $switch-color-bg_off_loading;
    }
  }

  &-type-line#{&}-loading#{&}-checked {
    background-color: transparent;

    &::after {
      background-color: $switch-color-bg_on_loading;
    }
  }

  &-type-line#{&}-small {
    min-width: $switch-line-small-width;
    height: $switch-size-small;
    line-height: $switch-size-small;
  }

  &-type-line#{&}-small#{&}-checked {
    padding-left: -$switch-size-small-line-gap;
  }

  &-type-line#{&}-small &-handle {
    top: $switch-size-small-line-gap;
    width: $switch-line-size-dot-small;
    height: $switch-line-size-dot-small;
    border-radius: ($switch-size-small * 0.5);

    &-icon {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  &-type-line#{&}-small#{&}-checked &-handle {
    left: calc(100% - $switch-line-size-dot-small - $switch-size-small-line-gap);
  }
}