// The switch wrapper
.#{$switch-prefix-cls} {
  position: relative;
  display: inline-block;
  min-width: $switch-width;
  height: $switch-height;
  padding-left: $switch-toggle-width;
  font-size: $switch-font-size;
  color: $switch-color;
  vertical-align: middle;
  cursor: $switch-cursor;
  user-select: none;
  background-color: $switch-bg;
  border-radius: $switch-border-radius;
  transition: background-color $transition-time;

  &::before,
  &::after {
    position: absolute;
    top: $switch-toggle-space;
    left: $switch-toggle-space;
  }

  &::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $switch-toggle-width;
    height: $switch-toggle-width;
    color: $switch-color;
    text-align: center;
    @extend %aid-icon;
    content: "\f56a";
    background-color: $switch-toggle-bg;
    border-radius: $switch-toggle-radius;
    transition: left $transition-time;
    transform: rotate(90deg);
  }

  &__inner{
    display: inline-block;
    width: 100%;
    padding: 0 $switch-inner-padding-x;
    font-size: $switch-inner-font-size;
    line-height: $switch-height;
    color: $switch-inner-color;
    text-align: right;
  }

  //
  //round 椭圆形
  //
  &--round {
    border-radius: $switch-round-border-radius;

    &::after {
      content: "";
      border-radius: $switch-round-toggle-radius;
    }
  }

  //
  //hover
  //

  @include hover-focus {
    background-color: darken($switch-bg,10%);
  }

  //
  //checked
  //

  @include checked-active {
    padding-right: $switch-toggle-width;
    padding-left: 0;
    color: $switch-checked-color;
    background-color: $switch-checked-bg;
    border-color: $switch-checked-border;

    .#{$switch-prefix-cls}__inner {
      text-align: left;
    }

    &::after {
      left: $switch-checked-toggle-left;
    }

    @include hover-focus {
      @include hover-gradient($switch-checked-bg,$switch-checked-gradient-bg);
    }
  }

  //
  // disabled
  //
  @include status-disabled {
    background-color: $input-bg-disabled;
    color: $gray-lighter;
  }

  //
  // sizing
  //

  &--lg{
    @include switch-size($switch-lg-font-size, $switch-lg-height, $switch-lg-width, $switch-lg-toggle-height, $switch-lg-toggle-width,$switch-lg-inner-padding-x,$switch-lg-checked-toggle-left,$switch-toggle-space-lg);
  }

  &--sm{
    @include switch-size($switch-sm-font-size, $switch-sm-height, $switch-sm-width, $switch-sm-toggle-height, $switch-sm-toggle-width,$switch-sm-inner-padding-x,$switch-sm-checked-toggle-left,$switch-toggle-space-sm);
    .switch__inner{
      display: none;
    }
  }


}