.auth-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  height: 100dvh;
  padding: 1rem;

  main {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* auth section */
.section__auth {
  background-color: var(--section-background-color);
  padding: 3rem 4rem 2rem;
  border-radius: 20px;
  max-width: 750px;

  hr {
    opacity: 0.2;
  }

  button {
    width: 100%;
  }

  .title {
    p {
      color: var(--form-title-paragraph-color);
    }
  }

  .field-validation {
    margin: 0.1rem 0 0.8rem;
  }

  .form-errormessage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
  }

  .external-auth-area {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
  }

  .external-login {
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    background-color: transparent;
    border: 1px solid var(--external-login-border-color);
    padding: 1rem;

    &:hover {
      cursor: pointer;
      padding: 0.9rem;
    }
  }

  .continue-with-hr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    margin: 3rem 0;

    * {
      margin: 0;
    }
  }

  .external-error-message {
    color: var(--danger-color);
    text-align: center;
    margin: 1rem 0;
    font-size: 0.9rem;
  }
}

#signInForm {
  .btn {
    margin-top: 1.5rem;
  }
}