@bigfishtv/cockpit/styles/components/filedrop.less

.file-drop-container {
	position: relative;
	width: 100%;

	&.dragging {

		.file-drop-overlay {
			z-index: 500;
			pointer-events: auto;
			background: @white;
			border: 1px dashed @mid-grey;
			outline: 0.4rem solid @white;
		}

		.hide-drag {
			opacity: 0;
		}
	}

	&.over {

		.file-drop-overlay {
			background: @primary;
			border: 1px dashed @white;
			outline: 0.4rem solid @primary;
		}

		.file-drop-overlay-title {
			color: @white;
		}
	}
}

.file-drop-overlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	transition: background @transition-fast ease-in-out,
				border @transition-fast ease-in-out,
				outline @transition-fast ease-in-out,
}

.file-drop-overlay-title {
	margin: 0;
}

.upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: @padding-large;
	margin: @margin-medium 0;
	min-height: 24rem;
	text-align: center;
	border: 1px dashed @grey-400;

	&:first-child {
		margin-top: 0;
	}

	&:last-child {
		margin-bottom: 0;
	}

	&.dragging {
		border: 2px dashed @primary;
	}

	&.over {
		background-color: fade(@primary, 5%);
	}
	
	h3,
	h4 {
		margin: 0;
	}

	p {
		margin: @margin-xsmall 0;
		max-width: 32rem;
		color: @grey-500;
		line-height: @line-height-small;

		&:last-child {
			margin-bottom: 0;
		}
	}

	&.upload-small {
		min-height: 16rem;
	}

	&.upload-xsmall {
		min-height: 12rem;
		padding: @padding-small;
		p {
			margin: @margin-xsmall/2 0;
		}
	}
}