.nut-empty {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: $empty-padding;

  &-image {
    img,
    image {
      width: 100%;
      height: 100%;
    }
  }

  &-title {
    text-align: center;
    color: $empty-title-color;
    font-weight: $font-weight-bold;
  }

  &-description {
    text-align: center;
    color: $empty-description-color;
    font-weight: $font-weight;
  }

  &-actions {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  &-action {
    margin-right: scale-px(6px);
    margin-left: scale-px(6px);
  }

  &-partial-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
  }

  &-content {
    flex: 1;
    min-width: 0;
  }

  // 全屏型：整页无数据
  &--full {
    padding-top: $empty-full-padding-top;

    .nut-empty-image {
      width: $empty-full-image-size;
      height: $empty-full-image-size;
    }

    .nut-empty-title {
      font-size: $empty-full-title-font-size;
      line-height: $empty-full-title-line-height;
    }

    .nut-empty-description {
      font-size: $empty-full-description-font-size;
      line-height: $empty-full-description-line-height;
    }

    .nut-empty-actions {
      margin-top: $empty-full-actions-margin-top;
    }
  }

  // 半屏型：模块、弹层等区域
  &--half {
    .nut-empty-image {
      width: $empty-half-image-size;
      height: $empty-half-image-size;
    }

    .nut-empty-title {
      font-size: $empty-half-title-font-size;
      line-height: $empty-half-title-line-height;
    }

    .nut-empty-description {
      font-size: $empty-half-description-font-size;
      line-height: $empty-half-description-line-height;
    }

    .nut-empty-actions {
      margin-top: $empty-half-actions-margin-top;
    }
  }

  // 局部型：横向图文
  &--partial {
    padding: $empty-partial-padding;

    .nut-empty-partial-body {
      gap: $empty-partial-content-gap;
    }

    .nut-empty-image {
      width: $empty-partial-image-size;
      height: $empty-partial-image-size;
    }

    .nut-empty-title {
      text-align: left;
      font-size: $empty-partial-description-font-size;
      line-height: $empty-partial-description-line-height;
      color: $empty-title-color;
      font-weight: $font-weight;
    }

    .nut-empty-description {
      text-align: left;
      font-size: $empty-partial-description-font-size;
      line-height: $empty-partial-description-line-height;
      color: $empty-description-color;
      font-weight: $font-weight;
    }
  }
}