@layer components {
  .auth-form {
    max-inline-size: 40ch;
    margin-inline: auto;
    background: color-mix(in srgb, var(--color-ink) 3%, transparent);
    padding: calc(var(--block-space) * 1.5) calc(var(--inline-space) * 2);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    margin-block-end: var(--block-space);
  }

  .auth-links {
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-small);

    p {
      margin-block-end: calc(var(--block-space) / 3);
    }
  }

  .form-group--checkbox {
    display: flex;
    align-items: center;
    gap: 1ch;

    label {
      margin-block-end: 0;
    }

    input[type="checkbox"] {
      accent-color: var(--color-info);
    }
  }

  .session-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2ch;
    padding-block: calc(var(--block-space) / 3);
    padding-inline: var(--inline-space);
    font-size: var(--text-small);
    color: var(--color-ink-light);
    border-block-end: 1px solid var(--color-border);
  }

  .session-bar__email {
    margin-inline-end: auto;
  }

  .qr-code {
    display: flex;
    justify-content: center;
    margin-block-end: var(--block-space);

    svg {
      max-inline-size: 100%;
      block-size: auto;

      @media (prefers-color-scheme: dark) {
        filter: invert(1);
      }
    }
  }

  .otp-manual {
    text-align: center;
    margin-block-end: var(--block-space);
  }

  .otp-secret {
    display: block;
    margin-block-start: calc(var(--block-space) / 2);
    padding: calc(var(--block-space) / 2) var(--inline-space);
    background: color-mix(in srgb, var(--color-ink) 6%, transparent);
    border-radius: var(--border-radius-sm);
    font-size: var(--text-small);
    word-break: break-all;
    user-select: all;
  }
}