EmptyState.module.scss

$base-class: 'empty-state';

.#{$base-class} {
  display: flex;
  align-items: center;

  &--centered {
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  &--inline {
    flex-direction: row;
    justify-content: space-between;
  }

  &--full {
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-16) var(--spacing-6);

    @media (width <= 600px) {
      padding: var(--spacing-8) var(--spacing-6);
    }
  }

  &__image {
    margin-bottom: var(--spacing-6);
    border-radius: var(--radius-4);
    width: auto;
    max-width: min(100%, 600px);
    height: auto;
    max-height: min(100%, 300px);
    object-fit: contain;
  }

  &__icon {
    &--full {
      margin-bottom: var(--spacing-2);
    }
  }

  &__description {
    max-width: 600px;
    text-align: center;
  }

  &__content-inline {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
  }

  &__title {
    margin: 0;
    margin-bottom: var(--spacing-2);
    max-width: 600px;
    text-align: center;
  }

  &__actions {
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);

    &--inline {
      margin-top: 0;
    }

    @media (width <= 600px) {
      flex-direction: column;
      margin-top: var(--spacing-2);

      &--inline {
        margin-top: 0;
      }
    }
  }
}