/*Returns a CSS clamp function which resolves to $size-at-min-width when page width is
below $min-width,
$size-at-max-width when page width is above $max-width,
and linearly scales between the two between $min-width and $max-width*/
.tx-felogin-pi1 {
  padding: var(--padding-l);
  border-radius: var(--border-radius-default);
  border: var(--border-default-width) solid var(--glass-grey-stroke);
  background: var(--glass-grey);
  box-shadow: 0 0 20px 0 rgba(162, 162, 165, 0.08);
  backdrop-filter: blur(30px);
}

/*
 * TYPO3 core felogin (typo3/cms-felogin) login/logout/password-recovery forms. Used by
 * Login.html, PasswordRecovery/Recovery.html, and PasswordRecovery/ShowChangePassword.html --
 * felogin has no shared Fluid layout, so each of those three templates wires this file
 * independently.
 *
 * "input[type='submit']" gets the literal "btn" class directly on the <f:form.submit> tags in the
 * three templates instead of reproducing button.css's recipe here, to avoid drifting from it.
 */
@layer extensions {
  .tx-felogin-pi1 {
    max-width: 58.75rem;
    margin-inline: auto;
  }
  .tx-felogin-pi1 .input-grp {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-m);
  }
  @media (min-width: 640px) {
    .tx-felogin-pi1 .input-grp {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .tx-felogin-pi1 fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
  }
  .tx-felogin-pi1 .fieldwrap {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }
}