Add animation styles and transitions to drop down menu and backdrop

src/Connected.Components/Styles/components/_dropdown.scss

@@ -1,30 +1,55 @@
 @use "../globals/" as *;
 @use "../util/" as *;
 
+.drop-down {
+   position: fixed;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   min-width: 80%;
+   height: auto;
+   max-height: max-content;
+   width: 80%;
+   opacity: 0;
+   display: flex;
+   flex-direction: column;
+   z-index: $dropdown-zindex;
+   list-style: none;
+   background-color: #fff;
+   box-shadow: $base-box-shadow;
+   border-radius: $border-radius-lg;
+   transition: all 0.3s ease-in-out;
+}
 
+.drop-down.fade-in {
+   animation: fade-in 0.3s ease-in-out forwards;
+}
 
+.drop-down.fade-out {
+   animation: fade-out 0.3s ease-in-out forwards;
+}
 
-.drop-down {
+@keyframes fade-in {
-  position: fixed;
+   0% {
-  top: 50%;
+      opacity: 0;
-  left: 50%;
+   }
-  transform: translate(-50%, -50%);
+
-  min-width: 80%;
+   100% {
-  width: 80%;
+      opacity: 1;
-  height: 0;
+   }
-  max-height: 0;
+}
-  display: flex;
+
-  flex-direction: column;
+@keyframes fade-out {
-  opacity: 0;
+   0% {
-  pointer-events: none;
+      opacity: 1;
-  z-index: $dropdown-zindex;
+   }
-  list-style: none;
+
-  background-color: #fff;
+   100% {
-  box-shadow: $base-box-shadow;
+      opacity: 0;
-  border-radius: $border-radius-lg;
+   }
-  transition: all 0.3s ease-in-out;
 }
 
+
 @include breakpoint(sm) {
   .drop-down {
     position: absolute;
@@ -39,17 +64,16 @@
 }
 
 .backdrop {
-  display: none;
+   z-index: $backdrop-zindex;
-  opacity: 0;
+   position: fixed;
-  z-index: $backdrop-zindex;
+   display: block;
-  position: fixed;
+   top: 0;
-  top: 0;
+   right: 0;
-  right: 0;
+   bottom: 0;
-  bottom: 0;
+   left: 0;
-  left: 0;
+   overflow: hidden;
-  overflow: hidden;
+   background-color: rgba(0, 0, 0, 0.5);
-  background-color: rgba(0, 0, 0, 0.5);
+   transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
 }
 
 .dropdown-header {