:root {
	--popover-background-color: #FFFFFF;
	--popover-backdrop-color: rgb(0 0 0 / 33%);
	--popover-font-color: black;

	--popover-width: 90%;
	--popover-height: 90%;
	--popover-transition-duration: 150ms;
}


/* @media (prefers-color-scheme: dark) {
	:root {
		--popover-background-color: #000000;
		--popover-font-color: white;
		--popover-backdrop-color: rgb(0 0 0 / 33%);
		--popover-button-background: #FFFFFF;
		--popover-button-text: #000000;
	}
} */

body:has([popover]:popover-open) {
	overflow: hidden;
	pointer-events: none;
}

/*   Closed state of the popover   */
[popover] {
	box-sizing: border-box;
	background-color: var(--popover-background-color);
	border: none;
	opacity: 0;
	transform: scaleY(0);
	width: var(--popover-width);
	max-width: var(--popover-width);
	height: var(--popover-height);
	max-height: var(--popover-height);
	overflow: auto;
	padding: 1rem;
	border-radius: .25rem;
	transition:
		opacity var(--popover-transition-duration) ease-out,
		transform var(--popover-transition-duration) ease-out,
		overlay var(--popover-transition-duration) ease-out allow-discrete,
		display var(--popover-transition-duration) ease-out allow-discrete;
	margin: auto;
}

/*   Open state of the popover  */
[popover]:popover-open {
	opacity: 1;
	transform: scaleY(1);
	pointer-events: all;
}

[popover]>button[popovertargetaction="hide"] {
	cursor: pointer;
	position: fixed;
	top: 0;
	right: 0;
	font-size: 1.25rem;
	margin: 0;
	padding: .5rem;
	border-radius: 0;
	border-bottom-left-radius: .25rem;
}

[popover]>button[popovertargetaction="hide"]:focus {
	outline: .1rem auto;
}

/*   Before-open state  */
/* Needs to be after the previous popover:popover-open rule to take effect,
    as the specificity is the same */
@starting-style {
	[popover]:popover-open {
		opacity: 0;
		transform: scaleY(0);
	}
}

/* Transition the :backdrop when the popover modal is promoted to the top layer */
[popover]::backdrop {
	background-color: transparent;
	transition:
		display var(--popover-transition-duration) allow-discrete,
		overlay var(--popover-transition-duration) allow-discrete,
		background-color var(--popover-transition-duration);
	/* Equivalent to
		transition: all var(--popover-transition-duration) allow-discrete; */
}

[popover]:popover-open::backdrop {
	background-color: var(--popover-backdrop-color);
	backdrop-filter: blur(1px);
}

/* This starting-style rule cannot be nested inside the above selector
	  because the nesting selector cannot represent pseudo-elements. */

@starting-style {
	[popover]:popover-open::backdrop {
		background-color: transparent;
	}
}