@use "../../styles/colors" as colors;
@use "../../styles/fonts" as fonts;
@use "../../styles/variables" as vars;
@use "../../styles/screen" as screen;

// Mirrors Angular `page-empty-list.component.scss` 1:1: 50px/40px/50px/124px
// padding on desktop with a 55px-wide icon anchored at 40px-left, and a
// mobile override that stacks icon-above-text at centered alignment.
.page-empty {
  background-color: colors.$white;
  padding: 50px 40px 50px 124px;
  background-image: url('/assets/img/icon-not-found.svg');
  background-position: 40px center;
  background-repeat: no-repeat;
  background-size: 55px auto;

  @include screen.mobile {
    padding: 124px 40px 50px 40px;
    background-position: center 40px;
  }

  &__title {
    margin-bottom: vars.$space-s;
    font-size: fonts.$font-size-xl;
    font-weight: fonts.$font-bold;
    color: colors.$text-color;

    @include screen.mobile {
      text-align: center;
    }
  }

  &__text {
    max-width: 80%;
    font-size: fonts.$font-size-m;
    line-height: 22px;
    color: colors.$gray;

    @include screen.mobile {
      text-align: center;
      max-width: initial;
    }
  }
}
