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

.v2-candidate-certificate {
  display: grid;
  gap: var(--pix-spacing-10x);

  h2 {
    @extend %pix-title-xs;

    margin-bottom: var(--pix-spacing-2x);
  }

  &__previous-button {
    width: fit-content;
    margin-top: var(--pix-spacing-10x);
    margin-bottom: var(--pix-spacing-3x);
  }

  &__note {
    @extend %pix-body-s;

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

  &__information {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-6x);

    @include breakpoints.device-is('tablet') {
      display: grid;
      grid-template-columns: auto min-content;
      gap: var(--pix-spacing-8x);
    }
  }

  &__complementary-information {
    @extend %pix-body-l;

    display: flex;
    flex-direction: column-reverse;
    gap: var(--pix-spacing-6x);

    @include breakpoints.device-is('tablet') {
      flex-direction: row;
      gap: var(--pix-spacing-8x);
      align-items: flex-start;

      .certificate-competences-details {
        flex: 2;
      }

      .v2-candidate-certificate-complementary-information__details {
        flex: 1;
      }
    }
  }
}

.v2-candidate-certificate-complementary-information {
  &__details {
    display: grid;
    gap: var(--pix-spacing-6x);

    @include breakpoints.device-is('tablet') {
      gap: var(--pix-spacing-8x);
      min-width: 21rem;
    }
  }
}
