/*
 * GlobalError component
 *
 */

@use '../../../style/core/utilities.scss' as utilities;

.dnb-global-error {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  height: 100%;

  color: var(--token-color-text-neutral);

  &--center {
    display: grid;
    place-content: center;
    height: 80vh;
  }

  &__inner {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* for large screens */
    width: 100%;
    max-width: var(--layout-large);

    padding: var(--spacing-large);

    @include utilities.allBelow(small) {
      padding: 0 var(--spacing-x-small);
    }

    text-align: center;

    &__content {
      max-width: 37rem; // apr. 600px as per design
    }
  }

  &__links {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;

    .dnb-anchor {
      font-size: var(--font-size-medium);
    }

    @include utilities.allBelow(small) {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .dnb-heading {
    @include utilities.allBelow(small) {
      // margin-top: 0;
      font-size: var(--font-size-large);
    }
  }
}