@use '@styles/variables.module.scss' as *;

.page {
  max-width: 100% !important;
  min-width: 30rem;

  .success {
    width: 50%;

    .center {
      padding-block: 2rem;
      color: $color-primary;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;

      h2 {
        font-size: 2.3rem;
        text-align: center;
      }

      .message {
        font-size: 1.5rem;
        margin-bottom: 1rem;
      }
    }
  }

  .login {
    width: 35rem;

    .login-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      .label {
        margin-bottom: 1rem;

        font-size: 2rem;
        text-align: center;
        color: $color-primary;
      }

      .login-btn {
        margin-top: 2rem;
      }

      .forgot-btn {
        padding: 0;
        align-self: center;
      }

      .line {
        display: flex;
        gap: 1rem;
      }
    }
  }
}

@media (max-width: $bp-small) {
  .page {
    min-width: none;

    .verify {
      .center {
        h2 {
          font-size: 1.5rem;
        }

        .message {
          font-size: 1rem;
        }
      }
    }
  }
}

@media (max-width: $bp-small) {
  .login {
    margin: 3rem;
  }
}
