/* editor.scss */
.video-cover-editor {
	position: relative;
	min-height: 200px;
	background: #f0f0f0;
	border: 2px dashed #ccc;
	border-radius: 4px;

	.video-cover-preview {
		position: relative;
		width: 100%;
		min-height: 300px;

		img {
			width: 100%;
			height: auto;
			display: block;
		}

		.video-overlay-preview {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 1);
			pointer-events: none;
		}

		.video-cover-content-preview {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			z-index: 2;
			padding: 2rem;

			// Content alignment classes
			&.align-top-left {
				align-items: flex-start;
				justify-content: flex-start;
			}
			&.align-top-center {
				align-items: flex-start;
				justify-content: center;
			}
			&.align-top-right {
				align-items: flex-start;
				justify-content: flex-end;
			}
			&.align-center-left {
				align-items: center;
				justify-content: flex-start;
			}
			&.align-center {
				align-items: center;
				justify-content: center;
			}
			&.align-center-right {
				align-items: center;
				justify-content: flex-end;
			}
			&.align-bottom-left {
				align-items: flex-end;
				justify-content: flex-start;
			}
			&.align-bottom-center {
				align-items: flex-end;
				justify-content: center;
			}
			&.align-bottom-right {
				align-items: flex-end;
				justify-content: flex-end;
			}

			.video-cover-content {
				width: 100%;
				max-width: 1200px;
				color: white;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

				// Style inner blocks for better visibility in editor
				h1, h2, h3, h4, h5, h6 {
					color: white;
				}

				p {
					color: white;
				}
			}
		}

		.video-info {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0, 0, 0, 0.7);
			color: white;
			padding: 10px;
			font-size: 14px;
			z-index: 3;

			p {
				margin: 0;
			}
		}
	}

	.video-cover-placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 200px;
		color: #666;
		font-size: 16px;
	}
}

.video-source-list {
	list-style: none;
	margin: 10px 0;
	padding: 0;

	.video-source-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 12px;
		background: #f5f5f5;
		border-radius: 4px;
		margin-bottom: 5px;

		.video-source-mime {
			font-family: monospace;
			font-size: 13px;
		}
	}
}