@switch-prefix: ~'@{icecream-prefix}-switch';

.@{switch-prefix} {
  .extendBaseEnhanced();
  @height: 22px;
  @handle-size: 18px;

  position: relative;
  display: inline-block;
  min-width: 44px;
  height: @height;
  line-height: @height;
  padding: 0;
  // 这个属性会让 switch 在 form 的排版略有瑕疵，高度多1px，暂时找不到好方法兼顾
  vertical-align: middle;
  border-radius: 40px;
  border: none;
  background-color: @icecream-color-grey-7;
  cursor: pointer;
  transition: all @icecream-transitions ease-in-out;

  &-inner {
    display: block;
    margin: 0 8px 0 24px;
    color: @icecream-white;
    .setFontSize(@icecream-font-size-1);
    transition: margin @icecream-transitions;
  }

  &-handle {
    position: absolute;
    width: @handle-size;
    height: @handle-size;
    left: 2px;
    top: 2px;
    border-radius: 50% 50%;
    background-color: @icecream-white;
    content: " ";
    cursor: pointer;
    transition: left @icecream-transitions ease-in-out;

    &-loading {
      color: @icecream-color-grey-9;
    }
  }

  &-checked {
    background-color: @icecream-primary-color;

    .@{switch-prefix}-inner {
      margin: 0 24px 0 8px;
    }

    .@{switch-prefix}-handle {
      left: calc(100% - @handle-size - 2px);
    }
  }

  &-disabled {
    cursor: no-drop;
    opacity: 0.4;

    .@{switch-prefix}-handle {
      cursor: no-drop;
    }
  }

  &-small {
    @height: 18px;
    @handle-size: 14px;

    min-width: 28px;
    height: @height;
    line-height: @height;

    .@{switch-prefix}-handle {
      width: @handle-size;
      height: @handle-size;
    }

    &.@{switch-prefix}-checked {
      background-color: @icecream-primary-color;

      .@{switch-prefix}-handle {
        left: calc(100% - @handle-size - 2px);
      }
    }
  }
}