.popover-container {
	opacity: 0;
	align-items: flex-start;
	position: fixed;
	inset: auto auto 80px 50%; /* Popovers don't have reference to viewport */
	transform: translate(-50%, 16px);
	transition: opacity 200ms ease, transform 200ms ease, overlay 200ms, display 200ms;
	transition-behavior: allow-discrete;
	gap: 12px;
	padding: 12px;
	overflow: hidden;
	width: 100%;
	max-width: 80vw;
}

.popover-success {
	color: var(--color-text-4-default);
	background: var(--color-feedback-success-strong);
	border: 1px solid var(--color-feedback-success-strong);
}

.popover-error {
	color: var(--color-text-4-default);
	background: var(--color-feedback-danger-strong);
	border: 1px solid var(--color-feedback-danger-strong);
}

.popover-information {
	color: var(--color-text-4-default);
	background: var(--color-feedback-info-strong);
	border: 1px solid var(--color-feedback-info-strong);
}

.popover-container:popover-open {
	display: flex;
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.popover-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
}

.popover-icon img {
	width: 20px;
	height: 20px;
	filter: invert(1);
}

.popover-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: auto;
	max-height: 250px;
	word-wrap: break-word;
}

.popover-content div:nth-child(1) {
	font: var(--font-m-medium);
}

.popover-content div:nth-child(2) {
	font: var(--font-s-regular);
}

.right-expanding-tooltip[popover] {
	max-width: 280px;
	background-color: var(--color-background-5-default);
	color: var(--color-text-4-default);
	font-size: 0.8rem;
	text-align: left;
	font-weight: 600;
	border-radius: 16px;
	padding: 16px;
	border: none;
	overflow: visible;
	left: calc(anchor(left));
	top: calc(anchor(bottom) + 4px);
}

@starting-style {
	.popover-container:popover-open {
		opacity: 0;
		transform: translateX(-50%) translateY(16px);
	}
}

@media screen and (min-width: 860px) {
	.popover-container {
		max-width: 500px;
	}
}