// @import '../_utils.scss';
.#{$switch-prefix-cls} {
  display: inline-block;
  width: $switch-width;
  border: 1px solid $switch-border-color;
  @if $--size-switch == yes {
    height: 22px;
    line-height: $--size-line-height-base;
  } @else {
    height: $switch-height;
    line-height: $switch-line-height;
  }
  border-radius: $switch-border-radius;
  vertical-align: middle;
  background-color: $switch-background-color;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all $transition-time $ease-in-out;

  @include theme-background-color($__switch_background-color);
  @include theme-border-color($__switch_border-color);

  &-inner {
    color: $switch-inner-color;
    font-size: $font-size-small;
    position: absolute;
    left: $switch-inner-left;
    @include theme-font-color($__switch_font-color);
    @include structure-font-size($__switch-default_font-size, 0);

    i {
      width: $switch-inner-i-width;
      height: $switch-inner-i-height;
      text-align: center;
    }
  }

  .slide {
    content: "";
    @if $--size-switch == yes {
      height: 18px;
      width: 18px;
    } @else {
      width: $switch-slide-width;    
      height: $switch-slide-height;
    }
    border-radius: $switch-slide-border-radius;
    background-color: $switch-slide-border-background-color;
    position: absolute;
    left: 1px;
    top: 1px;
    cursor: pointer;
    transition: left $transition-time $ease-in-out, width $transition-time $ease-in-out;

    @include theme-background-color($__switch-slide_background-color);
  }

  &:active {
    .slide {
      width: $switch-active-slide-width;
    }
  }

  &:focus {
    box-shadow: 0 0 0 2px fade($primary-color, 20%);
    outline: 0;

    @include theme-box-shadow($__switch_focus_box-shadow);
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-focused {
    border-color: $primary-color;

    @include theme-border-color($__switch_focus_border-color);
  }

  &-checked {
    border-color: $primary-color;
    background-color: $primary-color;

    @include theme-border-color($__switch_checked_border-color);
    @include theme-background-color($__switch_checked_background-color);

    .#{$switch-prefix-cls}-inner {
      left: $switch-checked-inner-left;
    }

    .slide {
      left: $switch-checked-slide-left;
    }

    &:active .slide {
      left: $switch-checked-active-slide-left;
    }
  }
  &-info.#{$switch-prefix-cls}-checked {
    border-color: $info-color;
    background-color: $info-color;

    @include theme-background-color($__switch_info_checked_background-color);
    @include theme-border-color($__switch_info_checked_border-color);
  }
  &-success.#{$switch-prefix-cls}-checked {
    border-color: $success-color;
    background-color: $success-color;

    @include theme-background-color($__switch_success_checked_background-color);
    @include theme-border-color($__switch_success_checked_border-color);
  }
  &-warning.#{$switch-prefix-cls}-checked {
    border-color: $warning-color;
    background-color: $warning-color;

    @include theme-background-color($__switch_warning_checked_background-color);
    @include theme-border-color($__switch_warning_checked_border-color);
  }
  &-error.#{$switch-prefix-cls}-checked {
    border-color: $error-color;
    background-color: $error-color;

    @include theme-background-color($__switch_error_checked_background-color);
    @include theme-border-color($__switch_error_checked_border-color);
  }

  &-small {
    width: $switch-small-width !important;    
    @if $--size-switch == yes {
      height: 16px!important;
    } @else {
      height: $switch-small-height !important;
    }
    line-height: $switch-small-line-height !important;

    .slide {
      @if $--size-switch == yes {
        height: 12px!important;
        width: 12px!important;
      } @else {
        height: $switch-small-slide-height !important;
        width: $switch-small-slide-width !important;
      }
    }

    &:active .slide {
      width: $switch-small-slide-width !important;
    }
  }
  &-small.#{$switch-prefix-cls}-checked {
    .slide {
      @if $--size-switch == yes {
        left: 25px!important;
      } @else {
        left: $switch-small-checked-slide-left !important;
      }
    }
  }
  &-small:active.#{$switch-prefix-cls}-checked {
    .slide {
      left: $switch-small-active-checked-slide-left !important;
    }
  }

  &-large {
    width: $switch-large-width !important;

    &:active .slide {
      width: $switch-large-slide-width !important;
    }
  }
  &-large.#{$switch-prefix-cls}-checked {
    .slide {
      left: $switch-large-checked-slide-left !important;
    }
  }
  &-large:active.#{$switch-prefix-cls}-checked {
    .slide {
      left: $switch-large-active-checked-slide-left !important;
    }
  }

  &-disabled {
    cursor: $cursor-disabled;
    background: $switch-disabled-background-color;
    border-color: $switch-disabled-border-color;

    @include theme-background-color($__switch_disabled_background-color);
    @include theme-border-color($__switch_disabled_border-color);

    .slide {
      background: $switch-disabled-slide-background;
      cursor: $cursor-disabled;

      @include theme-background-color($__switch-slide_disabled_background-color);
    }
    .#{$switch-prefix-cls}-inner {
      color: $switch-disabled-inner-color;

      @include theme-font-color($__switch_disabled_font-color);
    }
  }
  &-disabled.#{$switch-prefix-cls}-checked {
    @include theme-border-color($__switch_disabled_checked_border-color);
    @include theme-background-color($__switch_disabled_checked_background-color);
  }
}