.notification-wrapper {

	position:absolute;

	top:var(--header-height);

	left:0;

	right:0;

	z-index:9999;


	overflow:hidden;


	transform:translateY(-100%);

	opacity:0;


	transition:

	transform .35s ease,

	opacity .25s ease;


}



.notification-wrapper.is-visible {


	transform:translateY(0);

	opacity:1;


}



.notification-wrapper.is-closing {


	transform:translateY(-100%);

	opacity:0;


}




.notification {


	display:flex;


	align-items:center;


	justify-content:space-between;


	gap:1rem;




	width:100%;


	box-sizing:border-box;


}



.notification-content {


	flex:1;


}



.notification-info {


	background:#FFC303;

	color:#000;


}



.notification-success {


	background:#FFC303;

	color:#000;


}



.notification-warning {


	background:#FFC303;

	color:#000;


}



.notification-error {


	background:#fff0f0;

	color:#8a0000;


}



.notification-dismiss {

	position: absolute;
	right:0;
	width:44px;


	height:44px;


	display:flex;


	align-items:center;


	justify-content:center;


	flex-shrink:0;


	border:0;


	background:#fff;


	color:inherit;


	cursor:pointer;


	font-size:1.5rem;
	    border-radius: 9999px;
    position: absolute;
    top: var(--wp--preset--spacing--regular);
    right: var(--wp--preset--spacing--medium);


}



.notification-dismiss:focus-visible {


	outline:2px solid currentColor;

	outline-offset:2px;

}