@import '../styles/themes/themes.less';
@import '../styles/mixins/mixins.less';

.@{bk-prefix}-switcher {
  position: relative;
  position: relative;
  display: inline-block;
  display: inline-block;
  height: 20px;

  /* 默认尺寸 */
  min-width: 36px;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
  list-style: none;
  cursor: pointer;
  background-color: @switch-grey-color;
  border: 1px solid transparent;
  border-radius: 50px;
  border-radius: 100px;
  box-sizing: border-box;
  transition: all .4s ease;
  transition: all .36s;
  user-select: none;

  &:after {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: @switch-default-color;
    background-color: #fff;
    border-radius: 18px;
    content: ' ';
    transition: all .3s ease;
  }

  .switcher-text {
    display: block;
    margin-right: 6px;
    margin-left: 28px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    transition: all .3s ease;
  }

  .animating-node {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    pointer-events: none;
    border-radius: inherit;
    content: '';
    opacity: .2;
    box-shadow: 0 0 0 0 #1890ff;
    animation: fadeEffect 2s cubic-bezier(.08,.82,.17,1),waveEffect .4s cubic-bezier(.08,.82,.17,1);
    animation-fill-mode: forwards;

  }


  .@{bk-prefix}-switcher-loading {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 1;
    width: 16px;
    height: 16px;
    font-size: 12px;
    color: @switch-grey-color;
    cursor: pointer;
    background: transparent;
    border-radius: 16px;
    content: ' ';
    transition: all .36s cubic-bezier(.78,.14,.15,.86);

    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      animation: loading 1s linear infinite
    }
  }

  &.is-loading {
    cursor: defalt;

    input[type=checkbox] {
      cursor: default;
    }
  }

  /* 显示文本时固定尺寸 */
  &.show-label {
    height: 28px;
    min-width: 60px;
    line-height: 28px;

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

    .@{bk-prefix}-switcher-loading {
      width: 24px;
      height: 24px;
      font-size: 20px;
    }
  }

  &.show-label.is-checked {
    .@{bk-prefix}-switcher-loading {
      left: 100%;
      margin-left: -25px;
    }
  }

  &.is-disabled {
    cursor: not-allowed;
    opacity: .3;

    .@{bk-prefix}-switcher-loading {
      cursor: not-allowed;
    }

    &::after {
      cursor: not-allowed;
    }
  }

  &.is-checked {
    background: @success-color;

    .@{bk-prefix}-switcher-loading {
      svg {
        color: @success-color;
      }
    }

    &:not(.@{bk-prefix}-switcher-outline)&.@{bk-prefix}-primary {
      background: @primary-color;

      .@{bk-prefix}-switcher-loading {
        svg {
          color: @primary-color;
        }
      }
    }

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

    .switcher-text {
      margin-right: 28px;
      margin-left: 6px;
    }

  }

  &:not(.show-label).is-checked .@{bk-prefix}-switcher-loading {
    left: 100%;
    margin-left: -17px;
  }

  &.@{bk-prefix}-switcher-outline {
    background: @switch-default-color;
    border: 1px solid @switch-grey-color;

    &:after {
      width: 24px;
      height: 24px;
      background-color: @switch-grey-color;
      box-shadow: none;
    }

    .switcher-text {
      color: @switch-grey-color;
    }



    &.is-checked {
      border: 1px solid @success-color;

      &:after {
        background-color: @success-color;
      }

      .switcher-text {
        color: @success-color;
      }

    }

    .@{bk-prefix}-switcher-loading {
      svg {
        color: #fff;
      }
    }
  }

  &.@{bk-prefix}-switcher-outline&.@{bk-prefix}-primary {
    &.is-checked {
      border: 1px solid @primary-color;

      &:after {
        background: @primary-color;
      }

      .switcher-text {
        color: @primary-color;
      }
    }

  }

  &.@{bk-prefix}-switcher-square {
    border-radius: 2px;

    &:after {
      border-radius: 2px;
    }
  }

  &.@{bk-prefix}-switcher-large {
    height: 24px;
    min-width: 42px;
    line-height: 22px;

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

    .@{bk-prefix}-switcher-loading {
      width: 20px;
      height: 20px;
      font-size: 16px;
    }

    &.is-checked {
      .@{bk-prefix}-switcher-loading {
        margin-left: -21px;
      }
    }

  }

  &.@{bk-prefix}-switcher-small {
    height: 16px;
    min-width: 26px;
    line-height: 22px;

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

    .@{bk-prefix}-switcher-loading {
      width: 12px;
      height: 12px;
      font-weight: 700;
      transform: scale(.66667);
    }
  }

  &.@{bk-prefix}-switcher-small.is-checked {
    .@{bk-prefix}-switcher-loading {
      margin-left: -13px;
    }

  }
}

&:not(.show-label).@{bk-prefix}-switcher-default.@{bk-prefix}-switcher-outline {
  &::after {
    width: 16px;
    height: 16px;
  }
}

&:not(.show-label).@{bk-prefix}-switcher-outline.is-checked.@{bk-prefix}-switcher-small {
  &::after {
    width: 12px;
    height: 12px;
  }
}

&:not(.show-label).@{bk-prefix}-switcher-outline.is-checked.@{bk-prefix}-switcher-large {
  &::after {
    width: 20px;
    height: 20px;
  }
}

&:not(.show-label).@{bk-prefix}-switcher-outline.is-checked {
  &::after {
    width: 16px;
    height: 16px;
  }
}


@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}

@keyframes waveEffect {
  100% {
    box-shadow: 0 0 0 #1890ff;
  }
}

@keyframes loading {
  100% {
    transform: rotate(1turn);
  }
}
