@use "sass:math";

.sui-l-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  height: 100vh;
  margin: -$sui-l-topbar-height + math.div($sui-space-md, -1) auto math.div($sui-space-md, -1) auto;
  padding-top: $sui-l-topbar-height;
  text-align: center;

  &__content {
    margin-top: $sui-space-xl;
  }

  &__title {
    margin-bottom: 0;

    @include suiErrorTextModifiers('', $sui-l-error-title-default-size);

    @each $breakpoint in $sui-breakpoint-modifiers {
      @include suiMediaMin(nth($breakpoint, 1)) {
        @include suiErrorTextModifiers(nth($breakpoint, 2), $sui-l-error-title-default-size);
      }
    }
  }

  &__type {
    color: $sui-color-brand-denim-600;
    margin-top: 0;

    @include suiErrorTextModifiers('', $sui-l-error-type-default-size);

    @each $breakpoint in $sui-breakpoint-modifiers {
      @include suiMediaMin(nth($breakpoint, 1)) {
        @include suiErrorTextModifiers(nth($breakpoint, 2), $sui-l-error-type-default-size);
      }
    }
  }

  &__illustration {
    margin-top: auto;
    margin-bottom: $sui-space-xl;
    max-width: 90%;
  }
}
