From 8191d45f5d5f7fcde38c352e3cdbf0f79073bfcf Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Fri, 24 Nov 2023 16:36:37 +0200
Subject: [PATCH] fix: fixed borders for the Dropzone component

---
 src/Dropzone/_variables.scss |  8 ++++----
 src/Dropzone/index.scss      | 15 +++++++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/Dropzone/_variables.scss b/src/Dropzone/_variables.scss
index ee7caed6a4..81bfbe7493 100644
--- a/src/Dropzone/_variables.scss
+++ b/src/Dropzone/_variables.scss
@@ -1,9 +1,9 @@
 $dropzone-padding:                          1.5rem !default;
 $dropzone-border-default:                   1px dashed $gray-500 !default;
-$dropzone-border-hover:                     2px solid $info-300 !default;
-$dropzone-border-focus:                     2px solid $info-300 !default;
-$dropzone-border-active:                    2px solid $primary-500 !default;
-$dropzone-border-error:                     2px solid $danger-300 !default;
+$dropzone-box-shadow-hover:                 inset 0 0 0 2px $info-300 !default;
+$dropzone-box-shadow-focus:                 inset 0 0 0 2px $info-300 !default;
+$dropzone-box-shadow-active:                inset 0 0 0 2px $primary-500 !default;
+$dropzone-box-shadow-error:                 inset 0 0 0 2px $danger-300 !default;
 $dropzone-error-wrapper-color:              $danger-500 !default;
 $dropzone-restriction-msg-font-size:        $x-small-font-size !default;
 $dropzone-restriction-msg-color:            $gray-500 !default;
diff --git a/src/Dropzone/index.scss b/src/Dropzone/index.scss
index e804efeff4..07601791ce 100644
--- a/src/Dropzone/index.scss
+++ b/src/Dropzone/index.scss
@@ -10,20 +10,27 @@
   box-sizing: border-box;
   cursor: pointer;
 
+  &:hover,
+  &:focus,
+  &.pgn__dropzone-validation-error,
+  &.pgn__dropzone-active {
+    border-color: transparent;
+  }
+
   &:hover {
-    border: $dropzone-border-hover;
+    box-shadow: $dropzone-box-shadow-hover;
   }
 
   &:focus {
-    border: $dropzone-border-focus;
+    box-shadow: $dropzone-box-shadow-focus;
   }
 
   &.pgn__dropzone-validation-error {
-    border: $dropzone-border-error;
+    box-shadow: $dropzone-box-shadow-error;
   }
 
   &.pgn__dropzone-active {
-    border: $dropzone-border-active;
+    box-shadow: $dropzone-box-shadow-active;
   }
 }