/* <pc-vod-upload> — dropzone, progress bar, done/error panels. */

.rd-vod-upload {
	max-width: 960px;
	color: var(--rd-font-dark);
}

.rd-vod-upload-dropzone {
	border: var(--rd-borderwidth-border-default) dashed var(--rd-input-default);
	border-radius: var(--rd-borderradius-border-big);
	padding: var(--rd-spacing-x-big);
	text-align: center;
	background: var(--rd-list-default-dark);
}

pc-vod-upload[data-is-dragging-over="true"] .rd-vod-upload-dropzone {
	border-color: var(--rd-primary-active);
	background: var(--rd-primary-inactive);
}

.rd-vod-upload-icon::before {
	width: var(--rd-sizing-xl);
	height: var(--rd-sizing-xl);
	margin-right: 0;
	background-color: var(--rd-primary-active);
}

.rd-vod-upload-hint {
	margin: var(--rd-spacing-x-sm) 0 var(--rd-spacing-md);
}

.rd-vod-upload-formats {
	margin-top: var(--rd-spacing-sm);
	font-size: var(--rd-fontsize-3);
}

.rd-vod-upload-file {
	margin-bottom: var(--rd-spacing-x-sm);
	font-weight: var(--rd-fontweights-open-sans-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rd-vod-upload-bar {
	height: var(--rd-sizing-xs);
	background: var(--rd-input-disabled);
	border-radius: var(--rd-borderradius-border-xl);
	overflow: hidden;
}

.rd-vod-upload-bar-fill {
	display: block;
	height: 100%;
	background: var(--rd-success-default);
	transition: width 0.25s linear;
}

.rd-vod-upload-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-spacing-md);
	margin-top: var(--rd-spacing-x-sm);
}

.rd-vod-upload-status {
	font-size: var(--rd-fontsize-4);
}

.rd-vod-upload-done,
.rd-vod-upload-error {
	padding: var(--rd-spacing-md);
	border-radius: var(--rd-borderradius-border-big);
}

.rd-vod-upload-done {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-spacing-x-sm);
	background: var(--rd-success-inactive);
}

.rd-vod-upload-error {
	background: var(--rd-error-inactive);
}

.rd-vod-upload-error p {
	margin: 0 0 var(--rd-spacing-sm);
}

.rd-vod-upload-id {
	font-weight: var(--rd-fontweights-open-sans-1);
	user-select: all;
}

.rd-vod-upload-reset {
	border: 0;
	background: none;
	padding: var(--rd-spacing-xx-sm);
	cursor: pointer;
	line-height: 0;
}

.rd-vod-upload-reset::before {
	margin-right: 0;
}

.rd-vod-upload-reset:hover::before {
	background-color: var(--rd-error-hover);
}