style fix and css var updated

Author: Arif-un

src/styles.css

@@ -6,11 +6,11 @@
   --menu-max-height: 400px;
   --input-width: 300px;
   --font-size: 16px;
-  --border-radius: 8px;
-  --transition: 200ms;
+  --border-radius: 8px 8px 8px 8px;
   --active-menu-shadow: 1px 1px 5px 0px gray;
-  --option-bg-hover: rgb(233, 233, 233);
   --line-height: 1.4;
+  --active-menu-background: white;
+  --active-menu-radius: var(--border-radius);
 }
 
 .msl-wrp * {
@@ -36,38 +36,65 @@
   border-radius: var(--border-radius);
   outline: none;
   cursor: text;
+  transition: border-radius 200ms;
 }
 .msl:not(.msl-active, .msl-active-up):hover {
   border-color: rgb(80, 80, 80);
 }
 .msl-active {
-  background-color: white;
+  background: var(--active-menu-background);
   box-shadow: var(--active-menu-shadow);
   z-index: 9999;
   border-color: transparent;
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  border-radius: var(--active-menu-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+  transition: border-top-left-radius 400ms, border-top-right-radius 400ms;
 }
 .msl-active-up {
-  background-color: white;
+  background: var(--active-menu-background);
   box-shadow: var(--active-menu-shadow);
   z-index: 9999;
   border-color: transparent;
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  border-radius: var(--active-menu-radius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  transition: border-bottom-left-radius 400ms, border-bottom-right-radius 400ms;
 }
 .msl-active ~ .msl-options {
+  background: var(--active-menu-background);
   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);
+  border-radius: var(--active-menu-radius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  transition: border-bottom-left-radius 0.5s ease-in, border-bottom-right-radius 0.5s ease-in;
 }
 .msl-active-up ~ .msl-options {
+  background: var(--active-menu-background);
   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;
+  border-radius: var(--active-menu-radius);
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  transition: border-top-left-radius 700ms, border-top-right-radius 700ms;
+}
+.msl-options {
+  position: absolute;
+  width: 100%;
+  background: white;
+  max-height: 0;
+  overflow: auto;
+  scrollbar-color: rgb(0, 0, 0, 0.1) transparent;
+  scrollbar-width: thin;
+  border-radius: var(--border-radius);
 }
 .msl-input-wrp {
   display: inline-block;
@@ -91,11 +118,11 @@
 }
 .msl-chip {
   background: rgb(238, 238, 238);
-  border-radius: calc(var(--border-radius) - 3px);
+  border-radius: 5px;
   margin: 5px;
   padding: 3px 3px 3px 6px;
   white-space: nowrap;
-  font-size: calc(var(--font-size) - 3px);
+  font-size: var(--font-size);
   display: inline-flex;
   align-items: center;
   line-break: anywhere;
@@ -112,15 +139,6 @@
   line-break: strict;
   white-space: nowrap;
 }
-.msl-options {
-  position: absolute;
-  width: 100%;
-  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;
 }
@@ -139,7 +157,7 @@
 .msl-options .msl-option,
 .msl-grp-title {
   font-size: var(--font-size);
-  border-radius: calc(var(--border-radius) - 3px);
+  border-radius: 5px;
   padding: 7px 5px;
   cursor: pointer;
   margin: 4px 6px 4px;
@@ -168,7 +186,7 @@
 }
 .msl-options .msl-option:hover,
 .msl-option:focus {
-  background: var(--option-bg-hover);
+  background: rgb(233, 233, 233);
 }
 .msl-option-active {
   background: #e6f4fa;
@@ -199,26 +217,19 @@
   height: 25px;
 }
 
-.msl-clear-btn .msl-close-icn {
-  transform: scale(0.7);
-}
-
 .msl-clear-btn:hover,
 .msl-arrow-btn:hover {
   background: lightgray;
 }
 
 .msl-close-icn > line,
 .msl-arrow-icn > line {
-  stroke-width: 1.2;
-  stroke-linecap: round;
-  stroke: rgb(0, 0, 0, 0.6);
+  stroke-width: 1;
 }
 
 .msl-arrow-icn {
   height: 20px;
   width: 20px;
-  transform: scale(0.8);
 }
 
 .msl-chip-delete {
@@ -228,19 +239,17 @@
   min-height: 20px;
   margin-left: 3px;
   background: rgb(218, 218, 218);
+  color: rgb(0, 0, 0, 0.6);
 }
 .msl-chip-delete:hover {
   background: lightgray;
 }
 
-.msl-chip-delete .msl-close-icn {
-  transform: scale(0.6);
-}
 .msl-chip-delete .msl-close-icn > line {
   stroke-width: 1;
 }
 
 .msl-close-icn {
-  height: 15px;
-  width: 15px;
+  height: 10px;
+  width: 10px;
 }