@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "scss/mixin";
@import "scss/variable";
@import "./rtl.scss";

.#{$css-prefix}switch {
  @include box-sizing;
  outline: none;
  text-align: left;
  transition: background-color .2s ease, ;
  overflow: hidden;
  cursor: pointer;
  &-loading {
    cursor: not-allowed;
    &.#{$css-prefix}switch-on {
      .loading-icon {
        color: $switch-disabled-on-bg-color;
      }
    }
    &.#{$css-prefix}switch-off {
      .loading-icon {
        color: $switch-disabled-off-bg-color;
      }
    }
  }

  .loading-icon {
    position: absolute;
    z-index: 1;
    transition: transform .2s ease, left .2s ease,;
    transform-origin: left center;
  }

  &:after {
    content: " ";
    transition: transform .2s ease, left .2s ease, width .3s ease;
    transform-origin: left center;
  }

  &-medium {
    @include bounding($switch-size-m-width, $switch-size-m-trigger, $switch-border-width-container, $switch-border-width-trigger, $switch-size-m-radius-container, $switch-size-m-radius-trigger);
    &:not([disabled]):not(.#{$css-prefix}switch-loading):active::after {
      width: 22px;
    }
    .loading-icon {
      font-size: $switch-size-m-trigger;
    }
  }

  &-small {
    @include bounding($switch-size-s-width, $switch-size-s-trigger, $switch-border-width-container, $switch-border-width-trigger, $switch-size-s-radius-container, $switch-size-s-radius-trigger);
    &:not([disabled]):not(.#{$css-prefix}switch-loading):active::after {
      width: 16px;
    }
    .loading-icon {
      font-size: $switch-size-s-trigger;
    }
  }

  &-on {
    background-color: $switch-normal-on-bg-color;
    .loading-icon {
      right: 0;
    }
    &:after {
      right: 0;
      box-shadow: $switch-on-shadow;
      background-color: $switch-normal-on-trigger-bg-color;
      border-color: $switch-handle-on-border-color;
    }

    &:focus,
    &:hover {
      background-color: $switch-hover-on-bg-color;
      &:after {
        background-color: $switch-hover-on-trigger-bg-color;
      }
    }

    &:active {
      background-color: $switch-active-on-bg-color;
    }
  }

  &-on[disabled] {
    background-color: $switch-disabled-on-bg-color;
    cursor: not-allowed;
    &:after {
      box-shadow: $switch-on-shadow;
      background-color: $switch-disabled-on-trigger-bg-color;
      border-color: $switch-handle-disabled-border-color;
    }
  }
  &-off {
    background-color: $switch-normal-off-bg-color;
    border-color: $switch-normal-off-border-color;

    &:focus,
    &:hover {
      background-color: $switch-hover-off-bg-color;
      border-color: $switch-hover-off-border-color;
    }

    &:active {
      background-color: $switch-active-off-bg-color;
    }

    .loading-icon {
      left: 0;
      transform: translateX(0);
    }

    &:after {
      left: 0;
      transform: translateX(0);
      box-shadow: $switch-on-shadow;
      background-color: $switch-normal-off-trigger-bg-color;
      border-color: $switch-handle-off-border-color;
    }
  }
  &-off[disabled] {
    background-color: $switch-disabled-off-bg-color;
    cursor: not-allowed;
    &:after {
      box-shadow: $switch-off-shadow;
      background-color: $switch-disabled-off-trigger-bg-color;
      border-color: $switch-handle-disabled-border-color;
    }
  }
}