$switch-prefix-cls: "#{$css-prefix}switch";

.#{$switch-prefix-cls} {
  display: inline-block;
  width: $switch-width;
  height: $switch-height;
  line-height: $switch-line-height;
  border-radius: $switch-border-radius;
  vertical-align: middle;
  border: 1px solid $switch-border-color;
  background-color: $switch-background-color;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all $transition-time $ease-in-out;

  &-inner {
    color: $switch-inner-color;
    font-size: $font-size-small;
    position: absolute;
    left: $switch-inner-left;

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

  .slide {
    content: "";
    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;
  }

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

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

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

  &-focused {
    border-color: $switch-border-color;//去除focus边线颜色***************************
  }

  &-checked {
    border-color: $primary-color;
    background-color: $primary-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;
  }
  &-success.#{$switch-prefix-cls}-checked {
    border-color: $success-color;
    background-color: $success-color;
  }
  &-warning.#{$switch-prefix-cls}-checked {
    border-color: $warning-color;
    background-color: $warning-color;
  }
  &-error.#{$switch-prefix-cls}-checked {
    border-color: $error-color;
    background-color: $error-color;
  }

  &-small {
    width: $switch-small-width !important;
    height: $switch-small-height !important;
    line-height: $switch-small-line-height !important;

    .slide {
      width: $switch-small-slide-width !important;
      height: $switch-small-slide-height !important;
    }

    &:active .slide {
      width: $switch-small-slide-width !important;
    }
  }
  &-small.#{$switch-prefix-cls}-checked {
    .slide {
      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-border-color;//修改去除边框颜色************************
    .slide {
      background: $switch-disabled-slide-background;
      cursor: $cursor-disabled;
    }
    .#{$switch-prefix-cls}-inner {
      color: $switch-disabled-inner-color;
    }
    &.#{$switch-prefix-cls}-checked {
      background: rgba($primary-color, 0.5);// ***********************
    }
  }
}