Refactor styles in styles.css: fix margin typo, improve focus/hover effects, and standardize dropdown styling with updated colors and shadows.

theme/static_src/src/styles.css

@@ -226,7 +226,7 @@
 .choices[data-type*=text] .choices__button {
     position: relative;
     display: inline-block;
-    margin: 0-4px 0 2px;
+    margin: 0 -4px 0 2px;
     padding-left: 16px;
     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
     background-size: 8px;
@@ -253,26 +253,16 @@
     border-radius: var(--radius-field);
     font-size: 14px;
     min-height: 44px;
-    overflow: hidden
+    overflow: hidden;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
-
 .is-focused .choices__inner,
 .is-open .choices__inner {
     border-color: var(--color-base-content);
-    isolation: isolate;
+    box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
-    border-radius: var(--radius-field);
 }
 
-.is-focused {
-    border: 2px solid var(--color-base-content);
-    border-radius: calc(var(--radius-field) * 2);
-    margin: -2px;
-    padding: 2px; /* adjust offset */
-}
-
-
-
 .is-open .choices__inner {
     border-radius: var(--radius-field);
 }
@@ -281,6 +271,13 @@
     border-radius: var(--radius-field);
 }
 
+.is-focused {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    outline: 0;
+}
+
 .choices__list {
     margin: 0;
     padding-left: 0;
@@ -344,16 +341,16 @@
 .choices__list--dropdown,
 .choices__list[aria-expanded] {
     display: none;
-    z-index: 1;
+    z-index: 10;
     position: absolute;
     width: 100%;
-    background-color: var(--color-base-100);
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 20%, #0000);
-    border: 1px solid #ddd;
     top: 100%;
-    margin-top: 3px;
+    margin-top: 0.25rem;
     border-radius: var(--radius-field);
     overflow: hidden;
-    word-break: break-all
+    word-break: break-all;
+    box-shadow: 0 10px 25px color-mix(in oklab, var(--color-base-content) 12%, transparent)
 }
 
 .is-active.choices__list--dropdown,
@@ -363,7 +360,7 @@
 
 .is-open .choices__list--dropdown,
 .is-open .choices__list[aria-expanded] {
-    border-color: #b7b7b7
+    border-color: color-mix(in oklab, var(--color-base-content) 20%, #0000)
 }
 
 .is-flipped .choices__list--dropdown,
@@ -371,8 +368,8 @@
     top: auto;
     bottom: 100%;
     margin-top: 0;
-    margin-bottom: -1px;
+    margin-bottom: 0.25rem;
-    border-radius: .25rem .25rem 0 0
+    border-radius: var(--radius-field)
 }
 
 .choices__list--dropdown .choices__list,
@@ -387,8 +384,9 @@
 .choices__list--dropdown .choices__item,
 .choices__list[aria-expanded] .choices__item {
     position: relative;
-    padding: 10px;
+    padding: 10px 12px;
-    font-size: 14px
+    font-size: 14px;
+    color: var(--color-base-content)
 }
 
 [dir=rtl] .choices__list--dropdown .choices__item,
@@ -396,7 +394,7 @@
     text-align: right
 }
 
-@media (min-width:640px) {
+@media (min-width: 640px) {
 
     .choices__list--dropdown .choices__item--selectable[data-select-text],
     .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
@@ -430,7 +428,7 @@
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted,
 .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
-    background-color: var(--color-base-100)
+    background-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100))
 }
 
 .choices__list--dropdown .choices__item--selectable.is-highlighted::after,
@@ -473,7 +471,8 @@
 
 .choices__button:focus,
 .choices__input:focus {
-    outline: 0
+    outline: 0;
+    box-shadow: none;
 }
 
 .choices__input {