.switch-box {
  box-sizing: border-box;
  position: relative;
  width: 80px;
  height: 24px;
  background: #eeeeee;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  line-height: 24px;
  &.disabled {
    cursor: no-drop;
    opacity: 0.7;
  }
  .switch {
    width: 50%;
    border-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    text-align: center;
    color: #fff;
    transition: all 0.2s linear;
    // line-height: 24px;

    &.active {
      transform: translate(100%);
      background: #277fff;
    }

    &.deact {
      background: #aaaaaa;
    }
    .el-loading-mask {
      border-radius: 100px;
    }
    .el-loading-spinner {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      svg {
        width: 100%;
        height: 100%;
      }
    }
  }
  &-left,
  &-right {
    text-align: center;
    position: relative;
    display: inline-block;
    width: 50%;
    color: #aaa;
    z-index: 10;
  }
  &-left {
    padding-left: 3px;
  }
  &-right {
    padding-right: 3px;
  }
}
