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

.campaign-landing-page__container {
  margin: var(--pix-spacing-2x);

  @include breakpoints.device-is('tablet') {
    width: 80%;
    margin-top: var(--pix-spacing-12x);
    margin-bottom: var(--pix-spacing-12x);
  }
}

.campaign-landing-page__container__start {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--pix-spacing-8x) 0;
}

.campaign-landing-page__start__image__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: auto;
  margin-bottom: var(--pix-spacing-8x);

  @include breakpoints.device-is('tablet') {
    flex-direction: row;
  }
}

.campaign-landing-page__pix-logo {
  display: flex;
  gap: var(--pix-spacing-8x);
  margin: auto;
}

.campaign-landing-page__pix-logo .campaign-landing-page__marianne-logo {
  flex-direction: row;
}

.campaign-landing-page__image {
  height: 42px;

  @include breakpoints.device-is('tablet') {
    height: 70px;
  }
}

.campaign-landing-page-start {
  display: flex;
  flex-direction: column;
  gap: var(--pix-spacing-4x);
  width: 80%;
  margin: auto;
  text-align: center;

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

  &__subtitle {
    @extend %pix-title-xs;
  }

  &__legal {
    @extend %pix-body-xs;

    color: var(--pix-neutral-500);
  }
}

.campaign-landing-page__start__custom-text {
  width: 80%;
  margin-top: 50px;
  padding: 50px 5px 5px;
  font-size: 1rem;
  text-align: left;
  border-top: 1px dashed var(--pix-neutral-100);

  strong {
    font-weight: var(--pix-font-medium);
  }

  h1 {
    @extend %pix-title-m;
  }

  h2 {
    @extend %pix-title-s;
  }

  h3 {
    @extend %pix-title-xs;
  }
}

.campaign-landing-page__start-button {
  align-self: center;
  margin: var(--pix-spacing-2x) 0 var(--pix-spacing-8x) 0;
}

.campaign-landing-page__start__warning {
  margin-top: var(--pix-spacing-10x);
  color: var(--pix-neutral-900);
  font-size: 0.875rem;
  text-align: center;
}

/* ------------------------ ERROR ------------------------ */

.campaign-landing-page-error {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;

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

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

.campaign-landing-page__error-button {
  width: fit-content;
  margin: auto;
}
