// Animation

@keyframes pulse {
	0% {
		transform: scale( 1 );
	}

	50% {
		transform: scale( 1.1 );
	}

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

// Classes

.thumbnail {
	--videopress-video-item-aspect-radio: calc( 16 / 9 );
	position: relative;

	.thumbnail-placeholder {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: var( --jp-gray-0 );

		> * {
			aspect-ratio: var( --videopress-video-item-aspect-radio );
		}

		> img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.thumbnail-blank {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			fill: var( --jp-gray-50 );
		}
	}

	.video-thumbnail-duration {
		position: absolute;
		bottom: var( --spacing-base );
		right: var( --spacing-base );
		padding-left: var( --spacing-base );
		padding-right: var( --spacing-base );
		border-radius: var( --jp-border-radius );
		color: var( --jp-white );
		background-color: rgba( 44, 51, 56, 0.9 ); // (--jp-gray-80) Todo: figure how to apply opacity with HEXA colors
		z-index: 1;
	}

	&:not( .is-small ) {
		> img {
			border-radius: var( --jp-border-radius );
		}
	}
}

.video-thumbnail-edit {
	position: absolute;
	top: var( --spacing-base );
	right: var( --spacing-base );
	z-index: 3;

	.thumbnail__edit-button:global(.components-button) {
		padding: var( --spacing-base );

		> svg {
			margin: 0;
		}
	}
}

.custom-thumbnail {
	// Change spinner color
	--wp-admin-theme-color: var( --jp-green-50 );

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: var( --spacing-base );

	.pulse {
		animation: pulse 1.5s infinite;
	}

	&.is-row {
		.progress-bar {
			max-width: 80px;
		}

		.upload-text {
			margin-top: 0;
		}
	}
}

.progress-bar {
	max-width: 112px;
}

.upload-text {
	margin-top: calc( var( --spacing-base ) * 3 );
}

// TODO: Remove when implement use default thumbnail
.disabled {
	display: none;
}