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

.email-verification-code {
  color: var(--pix-neutral-800);

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

    padding-bottom: var(--pix-spacing-4x);
    color: var(--pix-neutral-900);
    text-align: center;

    @include breakpoints.device-is('tablet') {
      text-align: start;
    }
  }

  &__description {
    font-size: 0.875rem;
  }

  &__email {
    font-weight: bold;
    font-size: 0.875rem;
  }

  &__time-code-validation {
    margin-top: var(--pix-spacing-4x);
    font-weight: bold;
    font-size: 0.875rem;
  }

  &__input-code {
    margin: var(--pix-spacing-6x) 0;
  }

  &__error {
    max-width: 32.5rem;;
    margin-bottom: 1.25rem;
  }

  &__resend {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--pix-spacing-3x);
    opacity: 0;
    transition: opacity 0.2s ease-in;

    p {
      margin: 0;
      font-size: 0.875rem;
    }

    &.visible {
      opacity: 1;
    }

    button {
      margin-left: 0.125rem;
      padding: 0;
      color: var(--pix-primary-500);
      font-size: 0.875rem;
      background-color: transparent;
      border: none;
      cursor: pointer;
    }
  }

  &__resend-confirmation-message {
    margin-bottom: var(--pix-spacing-3x);
  }
}
