/**
 * Media Wrapper
 */
.greyd-media-wrapper {
	float: none !important;
	position: relative;
	max-width: 100%;
	/**
	 * Make hotspot wrapper overlay elements after the image to prevent
	 * popover from being cut off by the next block.
	 * @since 2.16.0
	 */
	z-index: 1;
}

.wp-block-greyd-hotspot-wrapper.alignleft {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.wp-block-greyd-hotspot-wrapper.aligncenter {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wp-block-greyd-hotspot-wrapper.alignright {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.greyd-media-wrapper img {
	height: auto;
	width: 100% !important;
	-webkit-touch-callout: none;
	/* iOS Safari */
	-webkit-user-select: none;
	/* Safari */
	-khtml-user-select: none;
	/* Konqueror HTML */
	-moz-user-select: none;
	/* Old versions of Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}


/**
 * Spot
 */
.greyd-hotspot {
	position: absolute !important;
	z-index: 99;
	transform: translate(-50%, -50%);
}

.greyd-hotspot.is-open {
	z-index: 100;
}

.greyd-hotspot .spot {
	/* reset button appearance */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: none;
	border: none;
	background: none;
	padding: 0 !important;
	cursor: pointer;

	font-size: var(--hotspot-size, 30px);
	height: 1em;
	width: 1em;
	position: relative;
	transition: all .2s ease;
}

/* types */
.greyd-hotspot .spot[data-type=element] {
	/* design */
	background-color: var(--hotspot-background-color, var(--wp--preset--color--darkest));
	border-radius: var(--hotspot-border-radius, 9999px);
}

.greyd-hotspot .spot[data-type=element]::before {
	content: " ";
	position: absolute;
	inset: 0;
	margin: calc(-1 * var(--hotspot-outline-offset, 0.3em));
	border: 2px solid var(--hotspot-outline-color, var(--wp--preset--color--darkest));
	border-radius: var(--hotspot-border-radius, 9999px);
}

.greyd-hotspot .spot[data-type=icon] {
	color: var(--hotspot-background-color, var(--wp--preset--color--darkest));
}

.greyd-hotspot .spot[data-type=image] {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-width: 20px;
}


/**
 * Popover
 */
.greyd-media-wrapper .popover {
	cursor: auto;
	/* variables */
	max-width: var(--popover-max-width);
	min-width: var(--popover-min-width, 250px);
	border-radius: var(--popover-border-radius, 2px);
	color: var(--popover-text-color, inherit);
	/**
	 * Set var(--text-color) to use for outline color
	 * @since 2.2.0
	 */
	--text-color: var(--popover-text-color, inherit);
	background-color: var(--popover-background-color, var(--wp--preset--color--lightest));
	border-top: var(--popover-border-top);
	border-bottom: var(--popover-border-bottom);
	border-left: var(--popover-border-left);
	border-right: var(--popover-border-right);
	box-shadow: var(--popover-box-shadow, 0 2px 16px -1px rgba(0, 0, 0, .2));
	padding-top: var(--popover-padding-top, var(--wp--style--block-gap));
	padding-bottom: var(--popover-padding-bottom, var(--wp--style--block-gap));
	padding-left: var(--popover-padding-left, var(--wp--style--block-gap));
	padding-right: var(--popover-padding-right, var(--wp--style--block-gap));
}

.greyd-media-wrapper[data-on-hover=true] dialog.popover:focus-visible {
	outline: 0;
}

.greyd-media-wrapper .popover *:is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/* content */
.greyd-media-wrapper .popover > :first-child {
	margin-top: 0;
}

.greyd-media-wrapper .popover > :last-child {
	margin-bottom: 0;
}

.greyd-media-wrapper .greyd-hotspot:not(.is-open) .popover {
	display: none;
}


/* desktop only */
@media screen and (min-width: 768px) {

	.hide-on-desktop {
		display: none !important;
	}

	.greyd-media-wrapper .popover {
		position: absolute;
		width: auto;
		height: auto;
		z-index: 10;
		opacity: 1;
		transition: all .2s ease;
		/* position */
		top: 100%;
		left: 50%;
		margin-top: var(--popover-offset, var(--wp--style--block-gap));
		transform: translateX(-50%);
	}

	/* positions */
	.greyd-media-wrapper .popover.position-top {
		top: auto;
		bottom: 100%;
		margin-top: 0;
		margin-bottom: var(--popover-offset, var(--wp--style--block-gap));
	}

	.greyd-media-wrapper .popover.position-right {
		top: 50%;
		left: 100%;
		margin-top: 0;
		margin-left: var(--popover-offset, var(--wp--style--block-gap));
		transform: translateY(-50%);
	}

	.greyd-media-wrapper .popover.position-left {
		top: 50%;
		left: auto;
		right: 100%;
		margin-top: 0;
		margin-right: var(--popover-offset, var(--wp--style--block-gap));
		transform: translateY(-50%);
	}

	/* triangle */
	.greyd-media-wrapper[data-show-triangle="true"] .popover::before {
		content: " ";
		position: absolute;
		--triangle-size: 7px;
		border: var(--triangle-size) solid transparent;
		margin: 0 calc(var(--triangle-size) * -1);
		border-bottom: calc(var(--triangle-size) + 1px) solid var(--popover-background-color, var(--wp--preset--color--lightest));
		bottom: calc(100% - 1px);
		left: 50%;
		transition: border .2s ease;
	}

	.greyd-media-wrapper[data-show-triangle="true"] .popover.position-top::before {
		border-bottom: var(--triangle-size) solid transparent;
		border-top: calc(var(--triangle-size) + 1px) solid var(--popover-background-color, var(--wp--preset--color--lightest));
		bottom: auto;
		top: calc(100% - 1px);
	}

	.greyd-media-wrapper[data-show-triangle="true"] .popover.position-left::before {
		border-bottom: var(--triangle-size) solid transparent;
		border-left: calc(var(--triangle-size) + 1px) solid var(--popover-background-color, var(--wp--preset--color--lightest));
		bottom: auto;
		left: calc(100% - 1px);
		top: 50%;
		margin: calc(var(--triangle-size) * -1) 0;
	}

	.greyd-media-wrapper[data-show-triangle="true"] .popover.position-right::before {
		border-bottom: var(--triangle-size) solid transparent;
		border-right: calc(var(--triangle-size) + 1px) solid var(--popover-background-color, var(--wp--preset--color--lightest));
		bottom: auto;
		left: auto;
		right: calc(100% - 1px);
		top: 50%;
		margin: calc(var(--triangle-size) * -1) 0;
	}
}

/* mobile only */
@media screen and (max-width: 767px) {

	.hide-on-mobile {
		display: none !important;
	}

	.greyd-media-wrapper .popover {
		min-width: min-content !important;
		max-width: calc(100vw - 80px);
		max-height: calc(100vh - 120px);
	}

	dialog::backdrop {
		background: linear-gradient(165deg, rgb(0, 0, 0, .2), rgb(0, 0, 0, .4));
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}
}



/**
 * Animations
 */
.greyd-hotspot .spot {
	animation-duration: 3s;
	animation-delay: var(--animation-delay, 1s);
	animation-iteration-count: infinite;
}

.greyd-hotspot.hotspot-pulse:not(.is-open) .spot,
.greyd-hotspot:not(.is-open) .spot.hotspot-pulse {
	animation-name: hotspot-pulse;
}

.greyd-hotspot.hotspot-blink:not(.is-open) .spot,
.greyd-hotspot:not(.is-open) .spot.hotspot-blink {
	animation-name: hotspot-blink;
}

.greyd-hotspot.hotspot-wobble:not(.is-open) .spot,
.greyd-hotspot:not(.is-open) .spot.hotspot-wobble {
	animation-name: hotspot-wobble;
}

/* keyframes */
@keyframes hotspot-pulse {

	0%,
	15%,
	100% {
		transform: scale(1);
	}

	5% {
		transform: scale(0.9);
	}

	10% {
		transform: scale(1.1);
	}
}

@keyframes hotspot-blink {

	0%,
	10%,
	100% {
		opacity: 1;
	}

	5% {
		opacity: 0;
	}
}

@keyframes hotspot-wobble {

	0%,
	20%,
	100% {
		transform: scale(1, 1);
	}

	5% {
		transform: scale(0.9, 1.1);
	}

	10% {
		transform: scale(1.1, 0.9);
	}

	15% {
		transform: scale(0.95, 1.05);
	}
}



/**
 * Polyfill
 */
.greyd-media-wrapper dialog.polyfill {
	position: fixed;
	z-index: 99;
	inset: 0;
	margin: auto;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	width: fit-content;
	height: -moz-fit-content;
	height: -webkit-fit-content;
	height: fit-content;
	display: block;
	overflow: auto;
}

.greyd-media-wrapper dialog.polyfill:not([open]) {
	display: none;
}

.greyd-media-wrapper dialog.polyfill + .backdrop {
	position: fixed;
	inset: 0;
	background: linear-gradient(165deg, rgb(0, 0, 0, .2), rgb(0, 0, 0, .4));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.greyd-media-wrapper dialog.polyfill ._dialog_overlay {
	position: fixed;
	inset: 0;
}

.greyd-hotspot button:focus-visible {
	outline: 2px dotted var( --text-color, var(--wp--preset--color--foreground, currentColor) );
	outline-offset: 6px;
	border-radius: 100%;
}