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

.join-restricted-campaign {
  form {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-4x);
    align-items: center;
    max-width: 380px;
    margin: 0 auto;

    > .pix-input {
      width: 100%;
    }
  }

  &__container {
    padding-bottom: 30px;

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

  &__title,
  &__sco-title {
    @extend %pix-title-l;

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

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

    margin: var(--pix-spacing-6x) 0;
    color: var(--pix-neutral-900);
    text-align: center;
  }

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

    margin: 0;
    font-weight: var(--pix-font-medium);
    font-family: fonts.$font-roboto;
  }

  &__field-error {
    @extend %pix-body-s;

    color: var(--pix-error-700);
  }

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

    margin: 8px 0;
    padding: 4px 10px;
    color: var(--pix-error-700);
    text-align: center;

    @include breakpoints.device-is('tablet') {
      padding: 0;
    }
  }

  &__birthdate {
    display: flex;
    flex-flow: row;
    gap: var(--pix-spacing-4x);
    align-items: center;
    justify-content: space-between;
  }

  &__button {
    display: block;
    margin: 0 auto;
  }

  &__no-student-number {
    margin: 10px 8px 0 0;
  }

  &__actions {
    display: flex;
    justify-content: center;
  }
}

.ember-modal-overlay.translucent {
  background-color: rgb(var(pix-neutral-900) / 40%);
}

.join-error-modal {
  position: absolute;
  top: 230px;
  max-width: 500px;

  &__header {
    display: flex;
    justify-content: space-between;
    height: 78px;
    padding: 20px;
    background-color: var(--pix-neutral-0);
  }

  &__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--pix-neutral-20);
  }

  &__footer {
    display: flex;
    justify-content: center;
    background-color: var(--pix-neutral-20);

    > button {
      margin: 0 8px;
    }
  }
}

.join-error-modal-header {
  &__title {
    display: flex;
    align-items: center;
  }
}

.join-error-modal-header-title {
  &__text {
    @extend %pix-title-xs;

    margin-left: 8px;
    color: var(--pix-neutral-900);
  }
}

.join-error-modal-header-close {
  &__icon {
    width: 32px;
    height: 32px;
    padding: 8px;
    color: var(--pix-neutral-500);
    background-color: var(--pix-neutral-20);
    border-radius: 50px;
  }
}

.join-error-modal-body {
  &__message {
    @extend %pix-body-s;

    color: var(--pix-neutral-900);
    text-align: left;
  }

  &__list li {
    padding: 5px 0;
  }
}
