@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5%;

  &__error {
    margin: var(--pix-spacing-6x);
    padding: var(--pix-spacing-6x);
    color: var(--pix-neutral-500);
    background: var(--pix-neutral-20);

    p {
      margin-bottom: var(--pix-spacing-4x);
    }
  }

  &__error-title {
    @extend %pix-body-l;

    font-weight: var(--pix-font-bold);
  }
}

.error-page__body-section {
  width: 100%;

  @include breakpoints.device-is('desktop') {
    max-width: 980px;
  }

  @include breakpoints.device-is('mobile') {
    margin:  0 0 var(--pix-spacing-4x);
  }
}

.error-page__main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 var(--pix-spacing-6x);
  padding: var(--pix-spacing-8x);
  border-bottom: solid 1px var(--pix-neutral-100);

  @include breakpoints.device-is('desktop') {
    padding: var(--pix-spacing-6x) 0;
  }

  @include breakpoints.device-is('mobile') {
    padding: 0 0 var(--pix-spacing-4x);
  }

  &__title {
    @extend %pix-title-m;

    padding-bottom: var(--pix-spacing-6x);
    text-align: center;
  }

  p {
    @extend %pix-body-l;

    padding-bottom: var(--pix-spacing-3x);
    color: var(--pix-neutral-500);
    text-align: center;

    a {
      text-decoration: underline;
    }
  }

  &__button-link {
    margin-top: var(--pix-spacing-6x);
  }
}

.error-page__index-link {
  margin-top: var(--pix-spacing-6x);

  @include breakpoints.device-is('desktop') {
    margin-top: var(--pix-spacing-8x);
  }
}
