@import (reference) './variable.less';

@emptyPrefix: ant-empty;

.@{emptyPrefix} {
  text-align: center;
  &-normal {
    .ant-empty-image-element {
      width: @empty-normal-width;
      height: @empty-normal-height;
    }
    .ant-empty-text {
      &-main {
        color: @empty-text-color;
        font-size: @sizeFont8;
        margin-top: @empty-margin-large;
      }
      &-sub {
        margin-top: 12 * @rpx;
        color: @empty-asisst-text-color;
      }
    }
    .ant-empty-button {
      padding-top: 80 * @rpx;
    }
  }

  &-small {
    .ant-empty-image-element {
      width: @empty-small-width;
      height: @empty-small-height;
    }
    .ant-empty-text {
      &-main {
        color: @empty-asisst-text-color;
        font-size: @sizeFont6;
        margin-top: @empty-margin-large;
      }
      &-sub {
        color: @COLOR_TEXT_WEAK;
        margin-top: 8 * @rpx;
      }
    }
    .ant-empty-button {
      padding-top: @empty-margin-middle;
    }
  }

  &-image {
    display: flex;
    justify-content: center;
  }

  &-text {
    margin-top: @v-spacing-large;
    line-height: @empty-text-line-height;

    &-main {
      color: @COLOR_TEXT_PRIMARY;
      font-size: @empty-font-size-large;
    }

    &-sub {
      font-size: @empty-font-size-common;
      margin-top: @empty-margin-middle;
      line-height: @empty-sub-line-height;
    }
  }

  &-button {
    &-layout-horizontal {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: @empty-horizontal-button-gap;
    }
    &-layout-vertical {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: @empty-vertical-button-gap;
      .ant-button {
        min-width: @empty-vertical-button-width;
      }
    }
  }

  &-extra {
    padding-top: @empty-margin-middle;
  }
}