@layer components {
    /* Quiet chrome next to "Kniha": ink, the accent only on hover, 44px targets for a thumb. */
    .account-nav {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .account-nav__link,
    .account-nav__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 44px;
        color: inherit;
        font-size: 0.875rem;
        text-decoration: none;
        white-space: nowrap;

        &:hover {
            color: var(--color-accent-700);
        }
    }

    .account-nav__sign-out {
        display: contents;
    }

    .account-nav__button {
        min-inline-size: 44px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;

        & svg {
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }
    }
}