@layer components {
	.klt-fullscreen-popup {
		position: fixed;
		z-index: 200;
		inset: 0;
		display: grid;
		width: 100vw;
		height: 100dvh;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: clamp(1rem, 4vw, 3rem);
		border: 0;
		place-items: center;
		background: rgb(0 0 0 / var(--klt-opacity, 76%));
		color: CanvasText;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--klt-duration-interactive) ease, visibility 0s linear var(--klt-duration-interactive);
	}

	.klt-fullscreen-popup[hidden] {
		display: none;
	}

	.klt-fullscreen-popup.is-open {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--klt-duration-interactive) ease;
	}

	.klt-fullscreen-popup::backdrop {
		background: transparent;
	}

	.klt-fullscreen-popup__surface {
		display: grid;
		gap: var(--klt-space-s);
		width: min(var(--klt-popup-width, 46rem), 100%);
		max-height: 100%;
		padding: clamp(1rem, 3vw, 1.75rem);
		overflow: auto;
	background: color-mix(in srgb, var(--klt-popup-surface, Canvas) var(--klt-opacity, 76%), transparent);
		color: var(--klt-popup-text, CanvasText);
		transform: scale(0.985);
		transition: transform var(--klt-duration-interactive) ease;
	}

	.klt-fullscreen-popup.is-open .klt-fullscreen-popup__surface {
		transform: scale(1);
	}

	.klt-fullscreen-popup__close {
		justify-self: end;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
	}

	:root.klt-popup-open,
	:root.klt-popup-open body {
		overflow: hidden;
	}

	:root.klt-popup-open [data-klt-popup-open][aria-expanded="true"] {
		visibility: hidden;
	}

	@media (prefers-reduced-motion: reduce) {
		.klt-fullscreen-popup,
		.klt-fullscreen-popup__surface {
			transition: none;
		}
	}
}