/*
 * Presentation for the account component in the navigation.
 *
 * Only the variables Shopify documents on <shopify-account> are set. The
 * component renders in a shadow root, so nothing else here reaches inside it,
 * and trying would break on the next component release.
 */

shopify-store.bumblechutes-account {
	display: inline-flex;
	align-items: center;
}

shopify-account {
	display: inline-flex;
	align-items: center;

	--shopify-account-color-text: currentColor;
	--shopify-account-font-body: inherit;
}

/*
 * The fallback link is what a visitor sees before the component upgrades, and
 * what they keep if the Shopify bundle never loads. It inherits the navigation
 * styling rather than bringing its own.
 */
.bumblechutes-account__fallback {
	color: inherit;
	font: inherit;
	text-decoration: inherit;
}

/*
 * Once the component has taken over, its own avatar replaces the text. Hiding
 * the fallback is gated on the component being defined, so a failed load leaves
 * the working link visible.
 */
shopify-account:defined .bumblechutes-account__fallback {
	display: none;
}