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

.certification-joiner {
  margin: var(--pix-spacing-8x) 0;
  text-rendering: optimizelegibility;

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

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

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

    color: var(--pix-neutral-800);
    text-align: center;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-6x);
    width: 410px;
    margin: 0 auto;
  }

  &__birthdate {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;

    .pix-input {
      flex: 0.3;

      input {
        padding-right: 3px;
      }
    }
  }

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

  .certification-course-page {
    &__errors {
      margin: 5px;
      color: var(--pix-error-500);
      font-size: 0.875rem;
      text-align: start;

      &__list {
        li {
          margin: 8px 0 0 16px;
          text-align: start;
          list-style: disc;
        }
      }

      a {
        display: flex;
        gap: var(--pix-spacing-1x);
        align-items: center;

        svg {
          width: 1rem;
          height: 1rem;
        }
      }

      a,
      a:visited {
        color: var(--pix-error-500);
        text-decoration: underline;
      }
    }
  }
}
