/* stylelint-disable declaration-colon-newline-after */
/* stylelint-disable function-parentheses-newline-inside */
/* stylelint-disable no-descending-specificity */
@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use 'pix-design-tokens/fonts';
@use 'pix-design-tokens/colors';

.certification-starter {
  @include breakpoints.device-is('desktop') {
    padding: 50px 70px 40px;
  }
}

.certification-start-page {
  &__header .pix-background-header__background {
    background: colors.$pix-primary-certif-gradient;
  }

  &__block {
    margin: var(--pix-spacing-3x) 0;
    padding: var(--pix-spacing-4x) var(--pix-spacing-4x) var(--pix-spacing-12x) var(--pix-spacing-4x);

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

  &__information {
    margin-top: var(--pix-spacing-3x);
    text-align: center;

    @extend %pix-body-s;
  }

  &__title {
    margin-bottom: var(--pix-spacing-6x);
    text-align: center;

    @extend %pix-title-m;

    @include breakpoints.device-is('tablet') {
      margin-bottom: var(--pix-spacing-10x);
    }
  }
}

.certification-starter-subscriptions {
  margin-bottom: var(--pix-spacing-8x);

  &-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    text-align: center;
    background-color: var(--pix-neutral-20);

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

    &-items {
      &__eligible,
      &__non-eligible {
        display: flex;
        gap: var(--pix-spacing-1x);
        align-items: center;
        font-weight: 500;

        @extend %pix-body-s;
      }

      &__eligible-icon {
        color: var(--pix-success-700);
      }

      &__non-eligible,
      &__non-eligible-icon {
        color: var(--pix-neutral-500);
      }

      &__non-eligible-icon,
      &__eligible-icon {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}

.certification-start-page__cgu {
  margin: var(--pix-spacing-2x) var(--pix-spacing-10x);
  line-height: 18px;
  text-align: justify;

  @extend %pix-body-xs;
}

.certification-start-page__form {
  text-align: center;
}

.certification-start-page__error-message {
  display: inline-flex;
  margin-top: var(--pix-spacing-4x);
}

.certification-start-page__field-button {
  margin: var(--pix-spacing-6x) auto;
}
