#popup  {
	--timing : 0.3s;
	box-sizing: border-box;
	background: none;
	border: none; 
	top: 50%;
	translate: 0 -50%;

	width: 100%;
	max-width: var(--wp--style--global--wide-size);

	transition: display var(--timing) allow-discrete, overlay var(--timing) allow-discrete;	
	animation: popupfadeOut var(--timing) forwards;
	
	& > .wp-block-group  {
		background-color: var(--wp--preset--color--beige-pale);
		border-radius : 3rem;
		padding : 0!important;
		overflow: clip;
	}
	
	&::backdrop {
		animation: popupbackdropFadeOut var(--timing) forwards;
	}
	
	&:popover-open {
		animation: popupfadeIn var(--timing) forwards;
		&::backdrop {
			animation: popupbackdropFadeIn var(--timing) forwards;
		}
	}
	
	& .popup-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 2;
		background: none;
		border: none;
		font-size: 2rem;
		color: #fff;
		cursor: pointer;
		font-weight: 700;
		background-color: var(--wp--preset--color--beige-pale);
		border-radius: 2rem;
		display: block;
		width: 3rem;
		line-height: 3rem;
	}
}



/* Keyframes for dialog and popover elements */

@keyframes popupfadeIn {
  from { opacity: 0; }
  to { opacity: 1;  }
}
@keyframes popupfadeOut {
  from { opacity: 1;  }
  to { opacity: 0; }
}

/* Keyframes for the backdrop pseudo-element */

@keyframes popupbackdropFadeIn {
  from { background: hsl(0 0% 0% / 0%) }
  to { background: hsl(0 0% 0% / 70%) }
}
@keyframes popupbackdropFadeOut {
  from { background: hsl(0 0% 0% / 70%) }
  to { background: hsl(0 0% 0% / 0%) }
}