.buntywp-exp-media-container {
	position: relative;
	margin-bottom: 20px;
	max-width: 100%;

	.image-container {
		position: relative;
		margin-bottom: 8px;

		.upload-button {

			&.centered {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 10;
			}

			&.hover-visible {
				position: absolute;
				top: 50%;
				right: 50%;
				opacity: 0;
				transition: opacity 0.2s ease;
			}
		}

		&:hover {

			.hover-visible {
				opacity: 1;
				z-index: 1;
			}
		}

		figure {
			margin: 0;

			video.uploaded-media {
				background-color: #000;
			}
		}
	}

	.exp-media-actions {
		display: flex;
		align-items: center;
		padding: 8px 0;

		.exp-media-like-button {
			background: transparent;
			border: none;
			padding: 6px;
			margin: 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 8px;
			transition: transform 0.15s ease;
			border-radius: 50%;

			&:hover {
				background-color: rgba(0, 0, 0, 0.05);
				transform: scale(1.1);
			}

			&:focus {
				outline: none;
			}

			.heart-icon {
				stroke: #262626;
				transition: all 0.2s ease;
			}

			&.liked .heart-icon {
				fill: #e0245e;
				stroke: #e0245e;
			}
		}

		.exp-media-like-count {
			font-weight: 600;
			color: #262626;
			font-size: 14px;
		}
	}

	&.has-border {

		.image-container figure {
			border-style: solid;
		}
	}
}

@keyframes heartScale {

	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes heartBurst {

	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(1.6);
	}

	100% {
		transform: scale(1);
	}
}

.block-editor-block-list__block .buntywp-exp-media-container {

	.image-container {
		min-height: 100px;
		background-color: #f7f7f7;
		border: 1px dashed #ddd;

		&:has(.uploaded-media) {
			background-color: transparent;
			border: none;
		}
	}

	.components-button.block-editor-media-placeholder__button {
		margin-bottom: 0;
	}
}