Chore: Hover color for status dropdown (#1906)

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -1,27 +1,42 @@
-.dropdown-pane.sleek {
+.dropdown-pane {
   @include elegant-card;
   @include border-light;
-  padding-left: 0;
-  padding-right: 0;
-  right: -12px;
-  top: 48px;
-  width: auto;
+  z-index: 999;
 
-  &::before {
-    @include arrow(top, var(--color-border-light), 14px);
-    position: absolute;
-    right: 6px;
-    top: -14px;
+  &.dropdown-pane--open {
+    display: block;
+    visibility: visible;
   }
 
-  &::after {
-    @include arrow(top, $color-white, var(--space-slab));
-    position: absolute;
-    right: var(--space-small);
-    top: -12px;
+  &.dropdowm--bottom {
+    &::before {
+      @include arrow(top, var(--color-border-light), 14px);
+      position: absolute;
+      right: 6px;
+      top: -14px;
+    }
+
+    &::after {
+      @include arrow(top, $color-white, var(--space-slab));
+      position: absolute;
+      right: var(--space-small);
+      top: -12px;
+    }
   }
 
-  .dropdown>li>a:hover {
-    background: var(--color-background);
+  &.dropdowm--top {
+    &::before {
+      @include arrow(bottom, var(--color-border-light), 14px);
+      bottom: -14px;
+      position: absolute;
+      right: 6px;
+    }
+
+    &::after {
+      @include arrow(bottom, $color-white, var(--space-slab));
+      bottom: -12px;
+      position: absolute;
+      right: var(--space-small);
+    }
   }
 }