.triggerContainer {
	display: contents;

	> * {
		anchor-name: var(--popover-anchor);
	}
}

.content {
	position: fixed;
	position-area: block-end;
	justify-self: anchor-center;
	margin: var(--s-2) 0;
	max-width: min(20rem, calc(100vw - var(--s-4)));
	overflow: auto;
	padding: var(--s-2);
	border: var(--border-style);
	border-radius: var(--radius-box);
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	white-space: pre-wrap;
	background-color: var(--color-bg);
	color: var(--color-text);
	outline: none;

	&[data-placement="top"] {
		position-area: block-start;
	}

	&[data-placement="bottom start"] {
		position-area: block-end span-inline-end;
		justify-self: unset;
	}

	&[data-placement="bottom end"] {
		position-area: block-end span-inline-start;
		justify-self: unset;
	}

	&[data-placement="right"] {
		position-area: inline-end;
		justify-self: unset;
		align-self: anchor-center;
	}
}