.nut-switch {
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: $primary-color;
  border-radius: 21px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  flex: 0 0 auto; // 防止被压缩
  &.switch-close {
    background-color: $switch-close-bg-color;
    .close-line {
      background: $switch-close--cline-bg-color;
      border-radius: 2px;
    }
  }
  .switch-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: $white;
    transition: transform 0.3s;
    .nut-switch-label {
      color: $white;
      font-size: $font-size-1;
      &.open {
        transform: translateX(-16px);
      }
      &.close {
        transform: translateX(16px);
      }
    }
  }
  &.nut-switch-disable {
    opacity: 0.6;
  }
  &.nut-switch-base {
    width: 36px;
    height: 21px;
    line-height: 21px;
    .switch-button {
      height: 13px;
      width: 13px;
      transform: translateX(30%);
    }
    &.switch-open {
      .switch-button {
        transform: translateX(146%);
      }
    }
    &.switch-close {
      .close-line {
        width: 8px;
        height: 2px;
      }
    }
  }
}
