@import "../../main";
.dropbox {
	#dropbox {
		&:after {
			content: "";
			position: absolute;
			border: 2px dashed #d2d2d2;
			top: 3%;
			right: 2%;
			bottom: 3%;
			left: 2%;
			border-radius: 3px;
		}
	}
	border: 1px solid #eee;
	.dropbox-area {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 250px;
		cursor: pointer;
		justify-content: center;
		text-align: center;
		background-color: $dropcolor;
		transition: background 0.1s ease;
		&:hover {
			background: darken($dropcolor, 3%);
		}
		i {
			font-size: 3em;
		}
		.indicator-inner {
			i {
				font-size: 3em;
				color: $buttoncolor;
			}
			h3 {
				color: darken($textcolor, 5%);
			}
		}
		&.drag-over {
			background: darken($dropcolor, 5%);
			.indicator-inner {
				h3,
				i {
					color: darken($textcolor, 20%);
				}
			}
		}
		.dropbox-content {
			text-align: center;
			width: 100%;
		}
	}
	.button-container {
		padding: 1em;
		text-align: center;
	}
}