.dragging {
  border: 2px solid var(--blue);
  border-radius: 4px;
  background-color: var(--light-blue);
  padding: 4px;
  scale: 1.075;
  // All text content should be bold while dragging.
  *:not(.dragging) {
    font-weight: var(--font-weight-bold);
  }
}

.draggingContainer {
  position: relative;
}
.ghostMask {
  color: var(--purple);
  font-size: var(--font-size-12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--medium-purple);
  border-style: dashed;
  border-radius: 4px;
  background-color: var(--lighter-gray);
  padding: 4px;
}