olelo-header .header-popover {
	min-inline-size: 14rem;
	max-inline-size: calc(100vi - 2rem);
	max-block-size: calc(100dvb - 2rem);
	overflow: auto;
	opacity: 0;
}

@supports (position-area: block-end) {
	olelo-header .header-popover {
		inset: auto;
		margin: 0;
		margin-block-start: 0.5rem;
		position-area: block-end span-inline-end;
		position-try-fallbacks:
			flip-block,
			flip-inline,
			flip-block flip-inline;
	}
}

@media (prefers-reduced-motion: no-preference) {
	olelo-header .header-popover {
		transition:
			opacity 200ms ease-out,
			display 200ms allow-discrete,
			overlay 200ms allow-discrete;
	}
}

olelo-header .header-popover:popover-open {
	opacity: 1;
}

@starting-style {
	olelo-header .header-popover:popover-open {
		opacity: 0;
	}
}

olelo-header :is(.header-popover-toggle, .header-popover-link):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

olelo-header .header-popover-toggle {
	position: relative;
}

olelo-header .header-popover-toggle::after {
	content: "";
	position: absolute;
	inset: min(0px, (100% - 44px) / 2);
}

olelo-header :is(.header-popover-toggle, .header-popover-link):active {
	opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
	olelo-header .header-popover-link:hover {
		background: color-mix(in oklch, oklch(100% 0 none) 12%, transparent);
	}
}

olelo-header.header-dark {
	color: var(--color-purple);

	& .btn {
		background-color: var(--color-purple);
		color: var(--color-white);

		&:hover {
			background-color: color-mix(in oklab, var(--color-purple) 95%, white);
		}
	}

	& :is([data-socials], [data-primary]) {
		background-color: color-mix(in oklab, var(--color-purple) 5%, transparent);
	}
}