@import '../../style/theme/default.less';

@color: #02c05f;

@switch-prefix-cls: ~'@{kui-prefix}-switch';

.@{switch-prefix-cls} {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background-color: #fdfdfd;
  border: 1px solid #e5e5e5;
  border-radius: 30px;
  transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);

  &::after {
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    content: ' ';
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    box-shadow: 0 6px 2px 0 rgba(0, 0, 0, 0.06), 0 6px 16px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
    transform: translate(1px, -50%);
  }

  &-size-normal {
    width: 102px;
    height: 62px;
    border-radius: 31px;

    &::after {
      width: 54px;
      height: 54px;
    }
  }

  &-size-small {
    width: 76px;
    height: 40px;
    border-radius: 20px;

    &::after {
      width: 34px;
      height: 34px;
    }
  }

  &-checked {
    background-color: @color;
    border-color: @color;

    &::after {
      transform: translate(44px, -50%);
    }
  }

  &-disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }
}