.nut-switch {
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: $switch-open-background-color;
  border-radius: $switch-border-radius;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  flex: 0 0 auto; // 防止被压缩

  &-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: $color-primary-text;
    transition: transform 0.3s;
    box-shadow: $switch-button-box-shadow;
  }

  &-base {
    width: $switch-width;
    height: $switch-height;
    line-height: $switch-line-height;

    .nut-switch-button {
      height: $switch-inside-height;
      width: $switch-inside-width;
      transform: $switch-inside-close-transform;
    }

    &.nut-switch-open {
      .nut-switch-button {
        transform: $switch-inside-open-transform;
      }

      &.nut-switch-disabled {
        background-color: $switch-open-disabled-background-color;
      }
    }

    &.nut-switch-close {
      .nut-switch-close-line {
        width: 12px;
        height: 2px;
      }

      &.nut-switch-disabled {
        background-color: $switch-close-disabled-background-color;
      }
    }
  }

  &-close {
    background-color: $switch-close-background-color;

    &-line {
      background: $switch-close-line-background-color;
      border-radius: 2px;
    }
  }

  &-label {
    color: $color-primary-text;
    font-size: $font-size-small;

    &.open {
      transform: translateX(-18px);
    }

    &.close {
      transform: translateX(14px);
    }
  }
}

[dir='rtl'] .nut-switch,
.nut-rtl .nut-switch {
  &-base {
    .nut-switch-button {
      transform: var(--nutui-switch-inside-close-transform, translateX(-14%));
    }

    &.nut-switch-open {
      .nut-switch-button {
        transform: var(--nutui-switch-inside-open-transform, translateX(-90%));
      }
    }
  }
  &-label {
    &.open {
      transform: translateX(18px);
    }

    &.close {
      transform: translateX(-14px);
    }
  }
}