From 15d250b103de0f92293b3f5ee039bf69369c4f70 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Sat, 14 Dec 2024 15:46:59 -0500
Subject: [PATCH] Refactor: [select.css] more CSS nesting

---
 src/components/select/select.css | 34 ++++++++++++++++----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/select/select.css b/src/components/select/select.css
index aae66f35e..35227ef9b 100644
--- a/src/components/select/select.css
+++ b/src/components/select/select.css
@@ -21,18 +21,18 @@
   width: 100%;
   position: relative;
   vertical-align: middle;
-}
 
-.select::part(popup) {
-  z-index: 900;
-}
+  &::part(popup) {
+    z-index: 900;
+  }
 
-.select[data-current-placement^='top']::part(popup) {
-  transform-origin: bottom;
-}
+  &[data-current-placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
 
-.select[data-current-placement^='bottom']::part(popup) {
-  transform-origin: top;
+  &[data-current-placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
 }
 
 /* Combobox */
@@ -75,14 +75,14 @@
   padding: 0;
   margin: 0;
   -webkit-appearance: none;
-}
 
-.select__display-input:focus {
-  outline: none;
-}
+  &:focus {
+    outline: none;
+  }
 
-.select__display-input::placeholder {
-  color: var(--wa-form-controls-placeholder-color);
+  &::placeholder {
+    color: var(--wa-form-controls-placeholder-color);
+  }
 }
 
 /* Visually hide the display input when multiple is enabled */
@@ -98,14 +98,14 @@
 
 .select__value-input {
   position: absolute;
+  z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  opacity: 0;
   padding: 0;
   margin: 0;
-  opacity: 0;
-  z-index: -1;
 }
 
 .select__tags {