@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;

.uploading-editor {
	width: 100%;
}

.uploading-editor__title {

	input {
		margin-left: 0;
		margin-right: 0;
	}
}

.uploading-editor__frame-selector {
	display: flex;
	flex-direction: column;
}

.uploading-editor__fields {
	display: block;
	padding: 0 20px;
}

.uploading-editor__content {
	padding: 0 3px;
}

.uploading-editor__video-container {
	position: relative;

	&:hover .uploading-editor__play-icon {
		opacity: 0;
	}
}

.uploading-editor__play-icon {
	width: 130px;
	height: 130px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -65px 0 0 -65px;
	opacity: 1;
	transition: opacity 0.3s ease-out;
}

.resumable-upload__editor-thumb-placeholder .uploading-editor__play-icon {
	// Magic math to fix centering of play icon: 65px + 26px height of UI buttons
	margin-top: -91px;
}

.uploading-editor__scrubber-help {
	color: gb.$gray-700;
}

.uploading-editor__upload-link {
	color: var(--wp-admin-theme-color) !important;
	text-decoration: underline !important;
	cursor: pointer;
}

.uploading-editor__video-poster {
	position: absolute;
	left: 0;
	top: 0;
	object-fit: cover;
}

.uploading-editor__range {
	margin-top: -19px;

	.components-range-control__track {
		height: 8px;
		border-radius: 0;
		background-color: #272526;
		opacity: 0.7;
	}

	.components-range-control__slider {
		padding-bottom: 0;
	}

	.components-base-control__field {
		margin-bottom: 0;
	}

	.components-range-control__wrapper {

		span:first-of-type {
			height: 8px;
			border-radius: 0;
			opacity: 0.8;
			background-color: #d9d9d9;
		}

		span:last-of-type {
			display: none;
		}
	}
}

.resumable-upload__editor-thumb-placeholder img {
	object-fit: cover;
}

.poster-selector__buttons {
	text-align: right;
}
