@import '../index.less';
@btri-switch: ~'@{ant-prefix}-btri-switch';

@keyframes moveRightCheckIcon {
  from {
    right: 18px;
  }

  to {
    right: 0px;
  }
}

@keyframes moveLeftCheckIcon {
  from {
    right: 0px;
  }

  to {
    right: 18px;
  }
}

@keyframes moveRightLoading {
  from {
    right: 22px;
  }

  to {
    right: 8px;
  }
}

@keyframes moveLeftLoading {
  from {
    right: 8px;
  }

  to {
    right: 22px;
  }
}

.@{ant-prefix}-btri-icon-box.@{btri-switch}-loading {
  transform: scale(0.7);
}

.@{btri-switch} {
  &-box.@{btri-switch}-loading {
    cursor: auto;
  }

  &-check-box.@{btri-switch}-loading {
    cursor: auto;
    position: relative;
    color: var(--primary3);

    .i-icon {
      position: absolute;
      top: -11px;
      right: 10px;
      font-size: 12px;
      animation: moveRightLoading 300;
      color: var(--primary-6);
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-rect {
    .i-icon {
      top: -8px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-unCheck.@{btri-switch}-rect {
    .i-icon {
      top: -8px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-rect.@{btri-switch}-small {
    .i-icon {
      top: -8px;
      right: 5px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-unCheck.@{btri-switch}-rect.@{btri-switch}-small {
    .i-icon {
      top: -8px;
      right: 16px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-round.@{btri-switch}-small {
    .i-icon {
      top: -8px;
      right: 5px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-unCheck.@{btri-switch}-round.@{btri-switch}-small {
    .i-icon {
      top: -8px;
      right: 16px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-rect.@{btri-switch}-large {
    .i-icon {
      top: 7px;
      right: 8px;
      font-size: 8px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-unCheck.@{btri-switch}-rect.@{btri-switch}-large {
    .i-icon {
      top: 7px;
      right: 27px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-round.@{btri-switch}-large {
    .i-icon {
      top: 7px;
      right: 8px;
      font-size: 8px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-unCheck.@{btri-switch}-round.@{btri-switch}-large {
    .i-icon {
      top: 7px;
      right: 27px;
    }
  }

  &-check-box.@{btri-switch}-loading.@{btri-switch}-unCheck {
    cursor: pointer;
    position: relative;
    color: var(--white);

    .i-icon {
      position: absolute;
      top: -11px;
      right: 33px;
      animation: moveLeftLoading 300;
      color: var(--gray-blue-4);
    }
  }

  &-check-box {
    cursor: pointer;
    position: relative;
    color: var(--primary-6);

    .i-icon {
      position: absolute;
      top: -8px;
      right: 18px;
      animation: moveLeftCheckIcon 300ms;
    }
  }

  &-check-box.@{btri-switch}-unCheck {
    color: var(--primary-6);

    .i-icon {
      right: 0px;
      animation: moveRightCheckIcon 300ms;
    }
  }

  &-box.@{ant-prefix}-switch.@{ant-prefix}-switch-disabled {
    background-color: var(--gray-blue-4);
    border: 1px solid var(--gray-blue-4);
  }

  &-box.@{ant-prefix}-switch.@{btri-switch}-large {
    min-width: 44px;
    height: 24px;

    .@{ant-prefix}-switch-handle {
      width: 16px;
      height: 16px;
    }
  }

  &-box.@{ant-prefix}-switch.@{ant-prefix}-switch-checked.@{btri-switch}-large {
    .@{ant-prefix}-switch-handle {
      left: calc(100% - 20px);
    }
  }

  &-box.@{ant-prefix}-switch.@{btri-switch}-small {
    min-width: 28px;
    height: 16px;

    .@{ant-prefix}-switch-handle {
      width: 8px;
      height: 8px;
    }
  }

  &-box.@{ant-prefix}-switch.@{ant-prefix}-switch-checked.@{btri-switch}-small {
    .@{ant-prefix}-switch-handle {
      left: calc(100% - 11px);
    }
  }

  &-box.@{ant-prefix}-switch {
    background: var(--white);
    border: 1px solid var(--gray-blue-6);

    &.hasText {
      display: flex;
      align-items: center;
    }

    .@{ant-prefix}-switch-handle {
      width: 12px;
      height: 12px;
      top: 3px;
    }

    .@{ant-prefix}-switch-handle::before {
      background-color: var(--gray-blue-6);
    }

    .@{ant-prefix}-switch-inner {
      color: var(--gray-blue-6);
      line-height: 1;
    }
  }

  &-box.@{ant-prefix}-switch.@{ant-prefix}-switch-checked.@{ant-prefix}-switch-disabled {
    background-color: var(--primary-3);
    border: 1px solid var(--primary-3);
  }

  &-box.@{ant-prefix}-switch.@{ant-prefix}-switch-checked {
    background-color: var(--primary-6);
    border: 1px solid var(--primary-6);

    .@{ant-prefix}-switch-handle {
      left: calc(100% - 16px);
      top: 3px;
    }

    .@{ant-prefix}-switch-handle::before {
      background: var(--white);
    }

    .@{ant-prefix}-switch-inner {
      color: var(--white);
    }
  }

  &-box.@{ant-prefix}-switch.@{btri-switch}-rect {
    border-radius: 5px;

    .@{ant-prefix}-switch-handle::before {
      border-radius: 3px;
    }
  }

  &-box.@{ant-prefix}-switch.@{btri-switch}-line {
    height: 4px;
    width: 32px;
    min-width: 32px;
    margin-top: 8px;
    border: none;
    background-color: var(--primary-1);

    .@{ant-prefix}-switch-handle {
      width: 16px;
      height: 16px;
      top: -7px;
      left: calc(100% - 15px);
    }

    .@{ant-prefix}-switch-handle::before {
      background: var(--white);
    }
  }

  &-box.@{ant-prefix}-switch.@{ant-prefix}-switch-checked.@{btri-switch}-line {
    background-color: var(--primary-6);

    .@{ant-prefix}-switch-handle {
      left: -1px;
    }
  }
}