From 42efade47eec0163eea15e6dbe077ff24a4877b0 Mon Sep 17 00:00:00 2001
From: Theodore Brown <theodorejb@outlook.com>
Date: Tue, 30 Jan 2024 14:45:16 -0600
Subject: [PATCH] Use CSS variables to avoid duplicating complex selectors

---
 scss/forms/_floating-labels.scss | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss
index ba4f66e0b6bf..48cd7a066f53 100644
--- a/scss/forms/_floating-labels.scss
+++ b/scss/forms/_floating-labels.scss
@@ -1,4 +1,6 @@
 .form-floating {
+  --#{$prefix}form-floating-input-padding-t: #{$form-floating-input-padding-t};
+  --#{$prefix}form-floating-input-padding-b: #{$form-floating-input-padding-b};
   position: relative;
 
   > .form-control,
@@ -36,19 +38,19 @@
 
     &:focus,
     &:not(:placeholder-shown) {
-      padding-top: $form-floating-input-padding-t;
-      padding-bottom: $form-floating-input-padding-b;
+      padding-top: var(--#{$prefix}form-floating-input-padding-t);
+      padding-bottom: var(--#{$prefix}form-floating-input-padding-b);
     }
     // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
     &:-webkit-autofill {
-      padding-top: $form-floating-input-padding-t;
-      padding-bottom: $form-floating-input-padding-b;
+      padding-top: var(--#{$prefix}form-floating-input-padding-t);
+      padding-bottom: var(--#{$prefix}form-floating-input-padding-b);
     }
   }
 
   > .form-select {
-    padding-top: $form-floating-input-padding-t;
-    padding-bottom: $form-floating-input-padding-b;
+    padding-top: var(--#{$prefix}form-floating-input-padding-t);
+    padding-bottom: var(--#{$prefix}form-floating-input-padding-b);
   }
 
   > .form-control:focus,
@@ -69,25 +71,19 @@
       }
     }
   }
+  // stylelint-disable selector-no-qualifying-type
   > textarea.form-control {
     // textareas require additional top padding to prevent label from overlapping text,
     // and additional bottom padding for when text is scrolled.
-    &:focus,
-    &:not(:placeholder-shown) {
-      padding-top: $form-floating-textarea-padding-t;
-      padding-bottom: $form-floating-textarea-padding-b;
-    }
-    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-    &:-webkit-autofill {
-      padding-top: $form-floating-textarea-padding-t;
-      padding-bottom: $form-floating-textarea-padding-b;
-    }
+    --#{$prefix}form-floating-input-padding-t: #{$form-floating-textarea-padding-t};
+    --#{$prefix}form-floating-input-padding-b: #{$form-floating-textarea-padding-b};
 
     // set textarea label background so it will remain legible when text is scrolled
     ~ label::after {
       background-color: $input-bg;
     }
   }
+  // stylelint-enable selector-no-qualifying-type
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
   > .form-control:-webkit-autofill {
     ~ label {