[data-notification] {
	--notification-top: 50%;
	--notification-left: 50%;
	--notification-transform-x: -50%;
	--notification-transform-y: -50%;
	position: fixed;
	z-index: 601;
	display: grid;
	grid-template-columns: 1fr;
	border: 0;
	opacity: 0;
	pointer-events: none;
	isolation: isolate;
	top: var(--notification-top);
	left: var(--notification-left);
	transition: opacity .2s ease-out, transform .3s var(--ficms-transition-overshoot);
	border-radius: var(--border-radius,var(--system-border-radius,0));
	box-shadow: var(--notification-box-shadow,var(--system-box-shadow,'none'));
	transform: translate(var(--notification-transform-x),var(--notification-transform-y));

	&[data-active] {
		pointer-events: auto;
		opacity: 1;
	}

	&:not([data-inlay]) {
		width: min(90vw,var(--width-notification,600px));
  		height: min(90vh,var(--width-notification,600px));
	}

	&[data-inlay] {
		--notification-top: 0%;
		--notification-transform-y: -200%;
		width: min(90vw,var(--width-notification,600px));
	} &[data-inlay][data-active] {
		--notification-transform-y: var(--system-gap);
	}

	&:not([data-inlay])::after {
		content: '';
		background-color: var(--ficms-color-contrast);
		opacity: .75;
		z-index: -1;
		position: absolute;
		left: -50vw;
		top: -50vh;
		width: 150vw;
		height: 150vh;
	}

	img[data-mediaid=""], a[href=""], [data-content="0"] {
		display: none;
	}

	.dialog__image, .dialog__content {
		border-radius: inherit;
	}

	&:has(> .dialog__content:not([data-content="0"])) .dialog__image {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

.dialog__image > .pictureSourceImg {
	position: initial;
	left: unset;
	top: unset;
	transform: unset;
	width: 100%;
	height: 100%;
} .dialog__close {
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	z-index: 20;
	font-size: 1.5rem;
	color: var(--_color,CanvasText);
	background: var(--_background-color,var(--clr-light-dark-background-a10));
	display: grid;
	place-items: center;
	cursor: pointer;
} .dialog__content {
	display: grid;
	grid-template-columns: 1fr;
	padding: var(--_padding,var(--system-gap));
	z-index: 1;
	background: var(--_background-color,var(--clr-light-dark-background-a0));
	color: var(--_color,CanvasText);

	&:not([data-inlay] .dialog__content) {
		gap: var(--_padding,var(--system-gap));
	}
}