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

.resumable-upload {
	background: gb.$white;
	color: gb.$gray-900;
	font-family: gb.$default-font;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px 0;
	border: 1px solid gb.$gray-900;
	border-radius: 2px;
	font-size: gb.$default-font-size;
}

.resumable-upload__editor {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
}

.resumable-upload__editor-col {
	width: 100%;
	padding-left: 10px;
}

.resumable-upload__editor-col:first-child {
	padding-left: 0;
}

.resumable-upload__editor-thumb-placeholder {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #000;
	color: #fff;
	margin-bottom: 10px;

	img {
		max-height: 100%;
		object-fit: contain;
	}
}

.uploading-editor__video {
	aspect-ratio: 16 / 9;
	max-height: 100%;
	object-fit: contain;
	background-color: #000;
}

.resumable-upload__status,
.resumable-upload__error {
	border-top: 1px solid gb.$gray-200;
	width: 100%;
	box-sizing: border-box;
	margin-top: gb.$grid-unit-30;
}

.resumable-upload__status {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20px 20px 0;
	flex-wrap: wrap;
	gap: gb.$grid-unit-15 gb.$grid-unit-30;
}

.resumable-upload__error {
	padding: 0 20px;
}

.resumable-upload__file-info {
	display: flex;
	flex-direction: row;
}

.resumable-upload__file-size {
	color: gb.$gray-700;
	margin-left: gb.$grid-unit-15;
}

.resumable-upload__progress {
	height: 8px;
	background: #d2d2d2;
	width: 100%;
	max-width: 160px;
	border-radius: 4px;
	box-sizing: border-box;
	overflow: hidden;
}

.resumable-upload__progress-loaded {
	background: var(--wp-admin-theme-color);
	text-align: center;
	color: #fff;
	height: 100%;
	min-height: 8px;
	transition: width 0.3s ease;
}

.resumable-upload__select-file {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.resumable-upload__select-file-name {
	margin-left: gb.$grid-unit-15;
}

.resumable-upload__actions {
	display: flex;
	flex-direction: row;
	justify-self: flex-end;
	justify-content: space-between;
	align-items: center;
	width: fit-content;
	margin-left: auto;

	.components-button.is-link {
		text-decoration: none;
		padding: 0;

		&:focus {
			box-shadow: none;
		}
	}
}

.resumable-upload__error-text {
	margin-top: gb.$grid-unit-20;
	font-family: gb.$default-font;
	color: gb.$alert-red;
}

.resumable-upload__error-cancel {
	margin-top: gb.$grid-unit-20;
	margin-left: gb.$grid-unit-15;
}
