/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './mixin.less';

@switch-prefix-cls: ~'@{kd-prefix}-switch';
@icon-prefix-cls: ~'@{kd-prefix}icon';

.@{switch-prefix-cls} {
  .switch;

  .@{switch-prefix-cls}-inner {
    .switch-inner;
    user-select: none;
  }

  .@{switch-prefix-cls}-loading-icon {
    color: @disabled-color;
    position: absolute;
    box-sizing: border-box;
    display: inline-block;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    .@{icon-prefix-cls}-loadding-circle {
      animation: loadingcircle 1s infinite;
      animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
      font-size: @switch-small-font-size;
      line-height: 1;
      vertical-align: baseline;
    }
  }

  &-disabled {
    background-color: @switch-off-disabled-bg;
    cursor: not-allowed;
  }

  &-checked {
    background-color: @switch-on-color;
    text-align: right;

    &::after {
      left: 100%;
      margin-left: -1px;
      transform: translateX(-100%);
    }

    .@{switch-prefix-cls}-loading-icon {
      left: unset;
      right: 1px;
      color: @switch-loading-color;
    }

    &.@{switch-prefix-cls}-disabled {
      background-color: @switch-on-disabled-bg;
    }

    .@{switch-prefix-cls}-inner {
      margin: @switch-inner-checked-margin;
    }

    &.@{switch-prefix-cls}-size-large {
      .@{switch-prefix-cls}-inner {
        margin: @switch-inner-large-checked-margin;
      }
    }
  }

  &-size-small {
    .switch-size(@switch-small-height, @switch-small-line-height, @switch-small-font-size, @switch-small-min-width, @switch-small-border-radius);
  }

  &-size-large {
    .switch-size(@switch-large-height, @switch-large-line-height, @switch-large-font-size, @switch-large-min-width, @switch-large-border-radius);

    .@{switch-prefix-cls}-inner {
      margin: @switch-inner-large-margin;
    }
  }
}
.@{switch-prefix-cls}-rtl {
  direction: rtl;
  .@{switch-prefix-cls}-inner {
    margin: @switch-inner-checked-margin;
    .@{switch-prefix-cls}-loading-icon {
      right: 0;
      left: unset;
      .@{icon-prefix-cls}-loadding-circle {
        animation: rtlloadingcircle 2s infinite;
      }
    }
  }
  &.@{switch-prefix-cls}::after {
    right: 1px;
    left: unset;
  }
  &.@{switch-prefix-cls}-checked {
    text-align: left;
    .@{switch-prefix-cls}-inner {
      margin: @switch-inner-margin;
      .@{switch-prefix-cls}-loading-icon {
        left: 1px;
        right: unset;
        .@{icon-prefix-cls}-loadding-circle {
          animation: rtlloadingcircle 2s infinite;
        }
      }
    }
    &.@{switch-prefix-cls}-size-large {
      .@{switch-prefix-cls}-inner {
        margin: @switch-inner-large-margin;
      }
    }
  }
  &.@{switch-prefix-cls}-checked::after {
    right: 100%;
    margin-right: -1px;
    margin-left: 0;
    transform: translateX(100%);
  }
  &.@{switch-prefix-cls}-size-large {
    .switch-size(@switch-large-height, @switch-large-line-height, @switch-large-font-size, @switch-large-min-width, @switch-large-border-radius);
    .@{switch-prefix-cls}-inner {
      margin: @switch-inner-large-checked-margin;
    }
  }
}
/*! rtl:end:ignore */