@import "../settings/variables";
@import "../tools/typography";

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: $empty-state-margin-top;
  margin-bottom: $empty-state-margin-bottom;
  overflow: hidden;

  &__image > img {
    max-width: 200px;
  }

  &__title {
    @include lg-medium--primary;

    margin-top: spacing(xl);
    text-align: center;
    width: $empty-state-width;
  }

  &__description {
    @include md-regular--secondary;

    margin-top: spacing(lg);
    text-align: center;
    width: $empty-state-width;
  }

  &__actions {
    margin-top: spacing(xl);
  }

  &--compact {
    margin-top: 0;
    margin-bottom: 0;

    .empty-state__title {
      @include md-regular--primary;

      width: $empty-state-width-compact;
    }

    .empty-state__description {
      @include sm-regular--secondary;

      width: $empty-state-width-compact;
    }
  }
}