.nut-switch {
  cursor: pointer;
  position: relative;
  /* #ifdef dynamic*/
  display: flex;
  /* #endif */
  /* #ifndef dynamic*/
  display: inline-flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  min-width: $switch-width;
  height: $switch-height;
  line-height: $switch-line-height;
  background-color: $switch-active-background-color;
  border-radius: $switch-border-radius;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  flex: 0 0 auto; // 防止被压缩

  &-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: calc($switch-height - $switch-border-width * 2);
    width: calc($switch-height - $switch-border-width * 2);
    border-radius: $switch-inside-border-radius;
    background: $color-primary-text;
    transition: left 0.3s linear;
    box-shadow: $switch-inside-box-shadow;
    &-open {
      left: calc(100% - $switch-height + $switch-border-width);
      &-rtl {
        left: $switch-border-width;
      }
    }
    &-close {
      left: $switch-border-width;
      &-rtl {
        left: calc(100% - $switch-height + $switch-border-width);
      }
    }
    .nut-icon {
      width: calc(($switch-height - $switch-border-width * 2) / 2);
      height: calc(($switch-height - $switch-border-width * 2) / 2);
      color: $switch-active-disabled-background-color;
    }
  }

  &-close {
    background-color: $switch-inactive-background-color;
    &-line {
      width: calc(($switch-height - $switch-border-width * 2) / 2);
      height: 2px;
      background: $switch-inactive-line-background-color;
      border-radius: 2px;
    }
  }

  &-label {
    /* #ifdef dynamic*/
    display: flex;
    /* #endif */
    /* #ifndef dynamic*/
    display: inline-flex;
    /* #endif */
    align-items: center;
    height: 100%;
    white-space: nowrap;
    color: $switch-label-text-color;
    font-size: $switch-label-font-size;
    .nut-icon {
      color: $switch-label-text-color;
    }
    &-open {
      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
      &-rtl {
        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
      }
    }

    &-close {
      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
      &-rtl {
        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
      }
    }

    &-close-disabled {
      color: $switch-inactive-disabled-label-text-color;
      .nut-icon {
        color: $switch-inactive-disabled-label-text-color;
      }
    }
  }

  &-disabled {
    background-color: $switch-active-disabled-background-color;
    &-close {
      background-color: $switch-inactive-disabled-background-color;
    }
  }
}