* {
	--st-width: 8rem;
	--st-height: 1.6rem;
}

.label-drag,
.label-placeholder {
	display: inline-block;
	text-align: center;
	width: var(--st-width);
	height: var(--st-height);
	flex-shrink: 0;
	flex-grow: 0;
	line-height: calc(var(--st-height) - 4px);
	padding-top: 4px;
	user-select: none;
	font-size: 90%;
	box-sizing: content-box;
}
.label-double {
	line-height: calc((var(--st-height) - 4px) / 2);
}

[class^="dropzone"] {
	position: absolute;
	width: 0;
	height: 0;
	display: flex;
	place-content: center;
	align-items: center;
}
.dropzone-t {
	align-items: first baseline;
}
.dropzone-b {
	align-items: last baseline;
}
.dropzone-l {
	justify-content: left;
}
.dropzone-r {
	justify-content: right;
}

/***** LABEL *****/
.label-drag {
	background-color: white;
	border: 1px solid var(--color-zinc-600);
	border-radius: 0.5rem;
	box-shadow: 1px 1px 1px var(--color-zinc-400);
}
.label-drag:not(.label-placeholder):not(.correct) {
	cursor: pointer;
}
.label-drag.correct {
	border: 0px !important;
	font-weight: 600 !important;
	overflow: visible !important;
}
.label-drag.correct:not(.label-trans) {
	background-color: white !important;
}
.label-trans.correct {
	background-color: transparent !important;
}
/*
TODO: FIGURE OUT HOVER STATES
.label-drag:not(.label-placeholder):not(.draggable-source--is-dragging):hover {
	background-color: var(--color-cyan-200);
}
*/

/* Label in dropzone */
[class^="dropzone"] > .label-drag:not(.label-placeholder) {
	border: 1px dashed var(--color-zinc-600);
	background-clip: padding-box;
	box-shadow: none;
}
.dropzone-l > .label-drag.correct {
	text-align: left !important;
	padding-left: 4px;
	padding-right: -4px;
}
.dropzone-r > .label-drag.correct {
	text-align: right !important;
	padding-right: 4px;
	padding-left: -4px;
}

/***** EMPTY SLOT *****/
.label-placeholder,
.empty:not(.draggable-mirror) {
	background-color: var(--color-zinc-100);
	background-clip: padding-box;
	box-shadow: inset 1px 1px 3px var(--color-zinc-400);
	border: 1px solid white;
	color: transparent;
}

/* Slot in dropzone */
[class^="dropzone"] > .label-placeholder,
[class^="dropzone"] > .empty:not(.draggable-mirror) {
	background-color: var(--color-zinc-100);
	background-clip: padding-box;
	border: 1px dashed var(--color-zinc-600);
	box-shadow: inset 1px 1px 3px var(--color-zinc-400);
	color: transparent;
}

/***** INTERACTION *****/
/* Label being dragged */
.draggable-mirror {
	border: 1px solid var(--color-zinc-600) !important;
	box-shadow: 2px 2px 6px var(--color-zinc-400) !important;
	z-index: 20;
}

/* Label might be put in dropzone */
[class^="dropzone"] .draggable-source--is-dragging {
	background-clip: padding-box;
	border: 1px dashed var(--color-zinc-600);
	box-shadow: none;
}

.draggable-source--is-dragging {
	background-clip: padding-box;
	background-color: var(--color-cyan-200);
}

/***** TESTING *****/
.debug .label-placeholder {
	background: none !important;
	box-shadow: none !important;
}

.debug .label-placeholder::after {
	content: "";
	position: absolute;
	top: -2px;
	width: 4px;
	height: 4px;
	border-radius: 2px;
	background-color: red;
}

.debug .dropzone-l .label-placeholder::after {
	left: -2px;
}

.debug .dropzone-r .label-placeholder::after {
	right: -2px;
}