Update styles.css

Author: Arif-un

src/styles.css

@@ -4,14 +4,22 @@
 }
 .msl-vars {
   --menu-max-height: 400px;
+  --input-width: 300px;
   --font-size: 16px;
-  --border-radius: 7px;
+  --border-radius: 8px;
   --transition: 200ms;
-  --menu-shadow: 1px 1px 5px 0px gray;
+  --active-menu-shadow: 1px 1px 5px 0px gray;
   --option-bg-hover: rgb(233, 233, 233);
+  --line-height: 1.4;
+}
+
+.msl-wrp * {
+  line-height: var(--line-height);
 }
 
 .msl-wrp {
+  width: var(--input-width);
+  outline: none;
   position: relative;
   border-radius: var(--border-radius);
 }
@@ -29,21 +37,37 @@
   outline: none;
   cursor: text;
 }
-.msl:not(.msl-active):hover {
+.msl:not(.msl-active, .msl-active-up):hover {
   border-color: rgb(80, 80, 80);
 }
 .msl-active {
   background-color: white;
-  box-shadow: var(--menu-shadow);
-  z-index: 999;
+  box-shadow: var(--active-menu-shadow);
+  z-index: 9999;
   border-color: transparent;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
+.msl-active-up {
+  background-color: white;
+  box-shadow: var(--active-menu-shadow);
+  z-index: 9999;
+  border-color: transparent;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
 .msl-active ~ .msl-options {
-  z-index: 999;
-  box-shadow: var(--menu-shadow);
+  z-index: 9999;
+  box-shadow: var(--active-menu-shadow);
   clip-path: inset(0px -10px -10px -10px);
   max-height: var(--menu-max-height);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+.msl-active-up ~ .msl-options {
+  z-index: 9999;
+  bottom: 99%;
+  box-shadow: var(--active-menu-shadow);
+  clip-path: inset(-10px -10px 0 -10px);
+  max-height: var(--menu-max-height);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 .msl-input-wrp {
   display: inline-block;
@@ -54,13 +78,12 @@
   vertical-align: top;
   outline: none;
   margin: 5px;
-  line-height: 1;
   padding: 3px;
   font-size: var(--font-size);
 }
 
 .msl-input::before {
-  line-height: 1;
+  line-height: var(--line-height);
   color: rgb(146, 146, 146);
 }
 .msl-input[data-placeholder]:not([data-placeholder=""]):empty::before {
@@ -92,10 +115,11 @@
 .msl-options {
   position: absolute;
   width: 100%;
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
   background: white;
   max-height: 0;
   overflow: auto;
+  scrollbar-color: rgb(0, 0, 0, 0.1) transparent;
+  scrollbar-width: thin;
 }
 .msl-options::-webkit-scrollbar {
   width: 8px;
@@ -120,11 +144,13 @@
   cursor: pointer;
   margin: 4px 6px 4px;
   line-break: anywhere;
-  line-height: 1.2;
+  line-height: var(--line-height);
   outline: none;
   white-space: break-spaces;
   transition: background 200ms;
 }
+
+.msl-wrp:focus-visible,
 .msl-option:focus-visible,
 .msl-btn:focus-visible {
   outline: 2px solid rgb(0, 119, 255);
@@ -171,7 +197,6 @@
 .msl-clear-btn {
   width: 25px;
   height: 25px;
-  transition: transform var(--transition);
 }
 
 .msl-clear-btn .msl-close-icn {