@import '../variables/default.scss';
@import '../mixins/index.scss';

$empty-prefix-cls: '.at-empty';

#{$empty-prefix-cls} {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 16px;
  font-size: $font-size-sml;
  text-align: center;

  &#{$empty-prefix-cls}-local {
    font-size: $font-size-slg;
  }

  &-image {
    image,
    img,
    .taro-img {
      width: $empty-image-width;
      height: $empty-image-height;
      vertical-align: middle;

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

    &-type-403 {
      image,
      img,
      .taro-img {
        width: $empty-image-other-width;
        height: $empty-image-other-height;
      }
    }
  }

  &-title {
    color: $color-text-title;
    font-size: $font-size-lg;
    padding-bottom: $empty-image-title-padding-bottom;
  }

  &-description {
    font-size: $empty-image-description-font-size;
  }

  #{$empty-prefix-cls}__button {
    margin-top: 24px;
  }

  &-footer {
    padding-top: 32px;
  }

  &-normal {
    padding: $empty-image-margin-top 0 64px;
    color: $color-grey-2;
  }

  &-small {
    padding: $empty-image-small-margin-top 0 16px 0;
    color: $color-grey-2;

    #{$empty-prefix-cls}-image {
      image,
      img,
      .taro-img {
        width: $empty-image-width-small;
        height: $empty-image-height-small;
      }

      &-type-403 {
        image,
        img,
        .taro-img {
          width: $empty-image-other-width-small;
          height: $empty-image-other-height-small;
        }
      }
    }
  }
}