@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/pictogram/pictogram.scss" as *;
@use "../../components/button/button.scss" as *;

.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  .ds-empty-state__text {
    margin-top: ds-spacing($ds-s-100);

    h2 {
      margin: 0;
      @include ds-typography($ds-typography-functional-heading-sm) {
        color: $ds-color-text-primary;
      }
    }

    .ds-empty-state__body {
      display: block;
      margin-top: ds-spacing($ds-s-025);
      @include ds-typography($ds-typography-functional-body-md) {
        color: $ds-color-text-primary-subtle;
      }
    }
  }

  .ds-empty-state__button-wrapper {
    margin-top: ds-spacing($ds-s-100);

    .ds-btn + .ds-btn {
      margin-top: ds-spacing($ds-s-050);
    }
  }
}