@use '../../../../mx-core/src/base/typography';
@use '../../../../mx-core/src/base/opacity';

:host {
  display: block;
}

.mx-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 64px;

  &__heading {
    margin-bottom: 16px;

    &__title {
      @extend .gl-headline-sm;
    }

    &__subtitle {
      @extend .gl-title-lg;
    }
  }

  &__content {
    &__minor-title {
      @extend .gl-title-sm;
      margin-bottom: 8px;
    }

    &__context {
      @extend .gl-body-md;
    }

    &__buttons {
      padding-top: 8px;
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
  }

  &__img {
    mat-icon {
      @extend .opacity-016;
      width: 160px;
      height: 160px;
      font-size: 160px;
    }
  }

  // Vertical layout styles
  &--vertical {
    flex-direction: column-reverse;
    text-align: center;
    justify-content: center;
    gap: 0;

    .mx-empty-state__content__buttons {
      justify-content: center;
    }
  }
}