.popover-container {
	align-items: flex-start;
	position: fixed;
	inset: auto auto 80px 50%; /* Popovers don't have reference to viewport */
	transform: translateX(-50%);
	gap: 8px;
	padding: 16px;
	overflow: hidden;
	min-width: 250px;
	max-width: 500px;
	border: none; /* User agent override */
	border-radius: 12px;
	box-shadow: var(--shadow-medium);
	background-color: var(--color-transparent-background-1);
	color: var(--color-background-1);
}

.popover-container:popover-open {
	display: flex;
	animation: popover-slide-up 200ms ease-out forwards;
}

.popover-container[popover-close]  {
	animation: popover-slide-down 200ms ease-in forwards; /* Match timing in JS function */
}

.popover-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.popover-success .popover-icon {
	background-color: var(--color-success-1);
}

.popover-information .popover-icon{
	background-color: var(--color-information);
}

.popover-error .popover-icon {
	background-color: var(--color-error);
}

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

.popover-content div:nth-child(1) {
	font-weight: bold;
	font-size: 1.1rem;
}

.popover-success .popover-content div:nth-child(1) {
	color: var(--color-success-1);
}

.popover-information .popover-content div:nth-child(1){
	color: var(--color-information);
}

.popover-error .popover-content div:nth-child(1) {
	color: var(--color-error);
}

.popover-content div:nth-child(2) {
	font-size: 0.85rem;
	line-height: 1.4;
}

.info-tooltip[popover] {
	max-width: 480px;
	background-color: var(--color-transparent-background-1);
	color: var(--color-background-2);
	font-size: 0.8rem;
	text-align: left;
	font-weight: bold;
	border-radius: 16px;
	padding: 16px;
	border: none;
	overflow: visible;
	left: calc(anchor(left) + 4px);
	top: calc(anchor(bottom) + 4px);
}

.info-tooltip[popover]::after {
	content: " ";
	position: absolute;
	top: -12px;
	right: 85%;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent var(--color-transparent-background-1) transparent;
}

@keyframes popover-slide-up {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0px);
	}
}

@keyframes popover-slide-down {
	from {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
	to {
		opacity: 0;
		transform: translateX(-50%) translateY(16px);
	}
}

@media screen and (max-width: 600px) {
	.info-tooltip[popover] {
		max-width: 80vw;
	}
}