/* Authentication */

/* Layout */

body {
  display: grid;
  background-color: var(--main-background-color);
}



/* Already logged in */

section.auth-form.already-logged-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--main-margin);
    padding: calc(2 * var(--main-padding));
}

.auth-already-btns {
    display: flex;
    gap: var(--main-margin);
}



/* Form */

section.auth-form > form {
  display: flex;
  flex-direction: column;

  position: relative;

  width: 20em;
  margin: 2em auto;
  gap: var(--main-margin);
  padding: var(--main-padding) calc(var(--main-padding) * 2) var(--main-padding) calc(var(--main-padding) * 2);

  background-color: white;
  color: black;

  border-radius: var(--main-border-radius);
  box-shadow: 0 0 30px 0 #00000059;
}

section.auth-form > form > * {
  /* margin-top: var(--main-margin); */
  margin-bottom: 0;
}



/* Autofill */

section.auth-form > form .wrapper:is(:has(input:-webkit-autofill), :has(input:-webkit-autofill:focus)) {
  background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4));
}



/* Remember me */

section.auth-form > form > label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #555;
  user-select: none;
  margin-top: var(--main-margin);
}

section.auth-form > form > label:has(input[type="checkbox"]) input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--main-accent-color);
  margin: 0;
}



/* Other */

section.auth-form h2 {
  font-size: 2em;
}

section.auth-form :is(h2, p) {
  text-align: center;
}

section.auth-form p {
  user-select: none;
}

section.auth-form a.neon-btn {
  color: #fff;
}

section.auth-form a {
  text-decoration: none;
  color: var(--form-selected);
  cursor: pointer;
}

.auth-error {
  padding: calc(0.65 * var(--main-padding)) var(--main-padding);
  border-radius: calc(0.5 * var(--main-border-radius));
  background: #fce8e8;
  color: var(--form-invalid);
  font-size: 0.9rem;
  margin: 0;
}

#username-desc {
  display: none;
  opacity: 0;
}



/* Register specific */

section.auth-form#register > form {
  width: 45em;

  row-gap: calc(2 * var(--main-margin));

  flex-flow: wrap;
  justify-content: center;
}

section.auth-form#register > form .wrapper {
  flex: calc(50% - calc(var(--main-margin) * 2.5));
}

section.auth-form#register > form > div .wrapper {
  flex: 100%;
  min-width: 25em;
}

section.auth-form#register > form > :is(p, button) {
  flex: 100%;
  min-width: 25em;
}

section.auth-form#register > form .wrapper:has(*:required) > span:first-of-type::after {
  position: absolute;

  content: '*';
  color: red;
  font-size: 1.2em;

  transform: translateX(0.2em) translateY(-0.1em);
}



/* Forgoten password/username */

.forgot-help {
  display: none;
  padding: 0.6rem 0.9rem;
  border-radius: 0.5rem;
  background: #fce8e8;
  color: #7a1010;
  font-size: 0.85rem;
  text-align: center;
}

.forgot-help:target {
  display: block;
}

.forgot-help a {
  color: var(--main-accent-color);
  font-weight: 600;
}



/* Responsive */

@media (max-width: 55em) {
  section.auth-form#register > form {
    width: 20em;

    flex-flow: column;
    gap: 0;
    row-gap: var(--main-margin);
  }

  section.auth-form#register > form > :is(p, button, div .wrapper) {
    min-width: 0;
  }

  section.auth-form#register > form .wrapper {
    flex: unset;
  }

  section.auth-form#register > form > div .wrapper {
    min-width: unset;
  }
}