:host {
  --empty-padding: 32px 0;
  --empty-image-width: 190rpx;
  --empty-image-height: 160rpx;
  --empty-description-margin-top: 24px;
  --empty-description-padding: 0 60px;
  --empty-description-color: var(--color-gray-1); // #666
  --empty-description-font-size: var(--font-size-base); // 26rpx
  --empty-description-line-height: 37rpx;
  --empty-bottom-margin-top: var(--padding-gap-lg); //32rpx
}

.empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--empty-padding);

  &-image {
    width: var(--empty-image-width);
    height: var(--empty-image-height);

    &:empty {
      display: none;
    }

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

  &-image:not(:empty) + &--image {
    display: none;
  }

  &-description {
    padding: var(--empty-description-padding);
    margin-top: var(--empty-description-margin-top);
    font-size: var(--empty-description-font-size);
    line-height: var(--empty-description-line-height);
    color: var(--empty-description-color);
    text-align: center;
    white-space: pre-line;

    &:empty {
      display: none;
    }
  }

  &-description:not(:empty) + &-description {
    display: none;
  }

  &-bottom {
    display: flex;
    margin-top: var(--empty-bottom-margin-top);

    &--btn {
      width: 280rpx;
    }
  }
}