@layer base {
	[data-playhouse] {
		position: relative;
		z-index: 0;
		touch-action: pan-y;

		& [data-playhouse-container] {
			position: relative;

			& [data-playhouse-canvas] {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				display: block;
				z-index: 10;
				pointer-events: none;
			}

			& [data-playhouse-events] {
				position: absolute;
				inset: 0;
				touch-action: manipulation !important;
			}

			& [data-playhouse-overlay] {
				position: absolute;
				inset: 0;
				z-index: 1;
				pointer-events: none;
			}
		}
		& [data-playhouse-info] {
			position: absolute;
			inset: 0;
			display: flex;
			flex-wrap: wrap;
			padding: calc(4 * var(--sp));
			gap: calc(4 * var(--sp));
			pointer-events: none;

			:root:not(:has(.editor-styles-wrapper)) & {
				visibility: hidden;
			}

			& [data-playhouse-card-measurer] {
				position: absolute;
				visibility: hidden;
				pointer-events: none;
			}
		}

		& [data-playhouse-card] {
			pointer-events: auto;
			will-change: transform;

			:root.safari & {
				&:hover {
					animation: playhouse-flash-in 0.3s var(--ease-out);
				}

				&:not(:hover) {
					animation: playhouse-flash-out 0.3s var(--ease-out);
				}
			}
		}
	}

	@keyframes playhouse-flash-in {
		0%,
		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes playhouse-flash-out {
		0%,
		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
}