@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;
      flex: 0 0 24rem;

      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;
      }
    }
  }
}