:fix: dashed drag and drop

src/front/Components/DesignSystem/DragAndDrop/classes.module.scss

@@ -1,6 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
+	position: relative;
 	display: inline-flex;
 	flex-direction: column;
 	gap: var(--spacing-3, 24px);
@@ -8,11 +9,31 @@
 	width: fit-content;
 	padding: var(--spacing-2, 16px) var(--Radius-2xl, 32px) var(--spacing-2, 16px) var(--spacing-xl, 32px);
 
-	border-radius: var(--Radius-md, 8px);
+	clip-path: inset(0 round var(--Radius-md, 8px));
-	border: 1px dashed var(--dropdown-input-border-hovered, #b4bec5);
+
+	&::before {
+		content: "";
+		position: absolute;
+		left: -15px;
+		top: -15px;
+		right: -15px;
+		bottom: -15px;
+		border: 16px dashed var(--dropdown-input-border-hovered);
+		border-radius: calc(2 * var(--Radius-md, 8px));
+		box-sizing: border-box;
+		z-index: -1;
+	}
+
+	&.filled {
+		&::before {
+			border-color: var(--dropdown-input-border-expanded);
+		}
+	}
 
 	&:hover {
+		&::before {
 			border-color: var(--dropdown-input-border-expanded);
+		}
 		background: var(--primary-weak-higlight, #e5eefa);
 	}
 

src/front/Components/DesignSystem/DragAndDrop/index.tsx

@@ -94,7 +94,10 @@ export default function DragAndDrop(props: IProps) {
 	};
 
 	return (
-		<div className={classNames(classes["root"])} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+		<div
+			className={classNames(classes["root"], documents.length > 0 && classes["filled"])}
+			onDrop={handleDrop}
+			onDragOver={(e) => e.preventDefault()}>
 			<div className={classes["content"]}>
 				<DocumentPlusIcon />
 				<Separator direction={ESeperatorDirection.VERTICAL} color={ESeperatorColor.STRONG} size={64} />