@layer pages {
  @scope (.login-page) to ([data-component]) {
    block-size: 100dvh;
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .inner {
      position: relative;
      /* Allow the panel to shrink so the container's inline padding is
         preserved on narrow viewports. */
      flex: 0 1 24rem;
      max-inline-size: 100%;

      display: flex;
      flex-direction: column;
      gap: 3rem;

      h1 {
        text-align: center;
      }
    }

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

    .logo {
      align-self: center;
    }

    .login-footer {
      position: absolute;
      top: 100%;
      inset-inline: 0;
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .login-footer-with-back-button {
      margin-top: 1rem;
    }

    .login-back-button {
      display: contents;
    }

    .login-back-button + * {
      margin-top: 1rem;
    }

    .login-footer-text {
      text-align: center;
      color: var(--color-neutral-5)
    }

    .resend-code-button {
      color: var(--color-accent-6);

      &:hover {
        text-decoration: underline;
      }
    }
  }
}