@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/inputgroup_vars.css

@@ -1,38 +1,38 @@
 .rQp3-W_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.rQp3-W_i18nFontFamily:lang(ar) {
-  font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(ar) {
+    font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(he) {
-  font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
+  &:lang(he) {
+    font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(zh) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
-}
+  &:lang(zh) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(zh-Hans) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-Hans) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(zh-Hant) {
-  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
-}
+  &:lang(zh-Hant) {
+    font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(zh-SG), .rQp3-W_i18nFontFamily:lang(zh-CN) {
-  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
-}
+  &:lang(zh-SG), &:lang(zh-CN) {
+    font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(ko) {
-  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
-}
+  &:lang(ko) {
+    font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
+  }
 
-.rQp3-W_i18nFontFamily:lang(ja) {
-  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  &:lang(ja) {
+    font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
+  }
 }
 
 .rQp3-W_spectrum-FocusRing-ring {
@@ -41,42 +41,50 @@
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
   --spectrum-focus-ring-border-size: 0px;
   --spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
-}
 
-.rQp3-W_spectrum-FocusRing-ring:after {
-  border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
-  content: "";
-  margin: calc(-1 * var(--spectrum-focus-ring-border-size));
-  pointer-events: none;
-  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  &:after {
+    border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
+    content: "";
+    margin: calc(-1 * var(--spectrum-focus-ring-border-size));
+    pointer-events: none;
+    transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
       margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  display: block;
-  position: absolute;
-  inset: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
 }
 
-.rQp3-W_spectrum-FocusRing.rQp3-W_focus-ring:after {
-  margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
-  box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+.rQp3-W_spectrum-FocusRing {
+  &.rQp3-W_focus-ring {
+    &:after {
+      margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
+      box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
-.rQp3-W_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.rQp3-W_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.rQp3-W_spectrum-FocusRing--quiet.rQp3-W_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &.rQp3-W_focus-ring {
+    &:after {
+      margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
         0;
-  box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+      box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
+    }
+  }
 }
 
 @media (forced-colors: active) {
   .rQp3-W_spectrum-FocusRing, .rQp3-W_spectrum-FocusRing-ring, .rQp3-W_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.rQp3-W_spectrum-FocusRing, .rQp3-W_spectrum-FocusRing-ring, .rQp3-W_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -87,51 +95,55 @@
   flex-flow: row;
   display: inline-flex;
   position: relative;
-}
-
-.rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-FieldButton {
-  padding: var(--spectrum-combobox-fieldbutton-inset);
-  inline-size: var(--spectrum-global-dimension-size-400);
-  --spectrum-alias-input-focusring-gap: calc(-1 * var(--spectrum-alias-input-border-size));
-  background-clip: content-box;
-  border-width: 0;
-  border-start-start-radius: var(--spectrum-combobox-fieldbutton-start-border-radius);
-  border-start-end-radius: var(--spectrum-combobox-fieldbutton-end-border-radius);
-  border-end-end-radius: var(--spectrum-combobox-fieldbutton-end-border-radius);
-  border-end-start-radius: var(--spectrum-combobox-fieldbutton-start-border-radius);
-  flex-shrink: 0;
-  position: relative;
-}
 
-.rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-FieldButton:before {
-  content: "";
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  border: var(--spectrum-alias-input-border-size) solid;
-  border-inline-start-width: var(--spectrum-combobox-fieldbutton-border-left-width);
-  z-index: -1;
-  border-start-start-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius, 0);
-  border-end-start-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius, 0);
-  transition: inherit;
-  position: absolute;
-  inset: 0;
-}
-
-.rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-FieldButton:after {
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  border-start-start-radius: var(--spectrum-combobox-fieldbutton-focus-ring-border-radius);
-  border-end-start-radius: var(--spectrum-combobox-fieldbutton-focus-ring-border-radius);
-}
+  & .rQp3-W_spectrum-FieldButton {
+    padding: var(--spectrum-combobox-fieldbutton-inset);
+    inline-size: var(--spectrum-global-dimension-size-400);
+    --spectrum-alias-input-focusring-gap: calc(-1 * var(--spectrum-alias-input-border-size));
+    background-clip: content-box;
+    border-width: 0;
+    border-start-start-radius: var(--spectrum-combobox-fieldbutton-start-border-radius);
+    border-start-end-radius: var(--spectrum-combobox-fieldbutton-end-border-radius);
+    border-end-end-radius: var(--spectrum-combobox-fieldbutton-end-border-radius);
+    border-end-start-radius: var(--spectrum-combobox-fieldbutton-start-border-radius);
+    flex-shrink: 0;
+    position: relative;
+
+    &:before {
+      content: "";
+      border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+      border: var(--spectrum-alias-input-border-size) solid;
+      border-inline-start-width: var(--spectrum-combobox-fieldbutton-border-left-width);
+      z-index: -1;
+      border-start-start-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius, 0);
+      border-end-start-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius, 0);
+      transition: inherit;
+      position: absolute;
+      inset: 0;
+    }
+
+    &:after {
+      border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+      border-start-start-radius: var(--spectrum-combobox-fieldbutton-focus-ring-border-radius);
+      border-end-start-radius: var(--spectrum-combobox-fieldbutton-focus-ring-border-radius);
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton {
-  border-width: 0;
-  border-start-start-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius, 0);
-  border-end-start-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius, 0);
-  padding: 0;
-}
+  &.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_spectrum-InputGroup--quiet) {
+    & .rQp3-W_spectrum-FieldButton {
+      border-width: 0;
+      border-start-start-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius, 0);
+      border-end-start-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius, 0);
+      padding: 0;
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-InputGroup-field .rQp3-W_spectrum-InputGroup-input-validationIcon, .rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-InputGroup-field .rQp3-W_spectrum-InputGroup-input-circleLoader {
-  padding-inline-end: 0;
-  inset-inline-end: var(--spectrum-global-dimension-size-100);
+  & .rQp3-W_spectrum-InputGroup-field {
+    & .rQp3-W_spectrum-InputGroup-input-validationIcon, & .rQp3-W_spectrum-InputGroup-input-circleLoader {
+      padding-inline-end: 0;
+      inset-inline-end: var(--spectrum-global-dimension-size-100);
+    }
+  }
 }
 
 .rQp3-W_spectrum-InputGroup-field {
@@ -147,46 +159,50 @@
 .rQp3-W_spectrum-InputGroup--quiet {
   min-width: calc(2 * var(--spectrum-dropdown-height, var(--spectrum-global-dimension-size-400)));
   border-radius: 0;
-}
-
-.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton {
-  inline-size: auto;
-  padding-inline-start: var(--spectrum-global-dimension-size-130);
-  padding-inline-end: 0;
-  position: relative;
-}
-
-.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:before {
-  border-width: 0;
-  border-inline-start-width: 0;
-  border-bottom: var(--spectrum-alias-input-border-size) solid;
-  border-radius: 0;
-}
 
-.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:after {
-  content: "";
-  block-size: 100%;
-  inline-size: 10px;
-  position: absolute;
-  inset-inline-end: -10px;
-}
+  & .rQp3-W_spectrum-FieldButton {
+    inline-size: auto;
+    padding-inline-start: var(--spectrum-global-dimension-size-130);
+    padding-inline-end: 0;
+    position: relative;
+
+    &:before {
+      border-width: 0;
+      border-inline-start-width: 0;
+      border-bottom: var(--spectrum-alias-input-border-size) solid;
+      border-radius: 0;
+    }
+
+    &:after {
+      content: "";
+      block-size: 100%;
+      inline-size: 10px;
+      position: absolute;
+      inset-inline-end: -10px;
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-InputGroup-icon {
-  inset-inline-end: 0;
-}
+  & .rQp3-W_spectrum-InputGroup-icon {
+    inset-inline-end: 0;
+  }
 
-.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-disabled .rQp3-W_spectrum-FieldButton {
-  border-radius: 0;
-}
+  &.rQp3-W_is-disabled {
+    & .rQp3-W_spectrum-FieldButton {
+      border-radius: 0;
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-InputGroup-field .rQp3-W_spectrum-InputGroup-input-validationIcon {
-  padding-inline-end: 0;
-  inset-inline-end: 0;
-}
+  & .rQp3-W_spectrum-InputGroup-field {
+    & .rQp3-W_spectrum-InputGroup-input-validationIcon {
+      padding-inline-end: 0;
+      inset-inline-end: 0;
+    }
 
-.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-InputGroup-field .rQp3-W_spectrum-InputGroup-input-circleLoader {
-  padding-inline-end: 0;
-  inset-inline-end: var(--spectrum-global-dimension-size-10);
+    & .rQp3-W_spectrum-InputGroup-input-circleLoader {
+      padding-inline-end: 0;
+      inset-inline-end: var(--spectrum-global-dimension-size-10);
+    }
+  }
 }
 
 .rQp3-W_spectrum-InputGroup-popover--quiet {
@@ -196,203 +212,327 @@
 
 .rQp3-W_spectrum-Datepicker--range {
   border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-}
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet, .rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton {
-  border-radius: 0;
-}
+  &.rQp3-W_spectrum-InputGroup--quiet {
+    border-radius: 0;
+
+    & .rQp3-W_spectrum-FieldButton {
+      border-radius: 0;
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-Datepicker--datetimeRange .rQp3-W_spectrum-InputGroup-field {
-  width: calc(calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150)) + var(--spectrum-global-dimension-size-700) -
+  &.rQp3-W_spectrum-Datepicker--datetimeRange {
+    & .rQp3-W_spectrum-InputGroup-field {
+      width: calc(calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150)) + var(--spectrum-global-dimension-size-700) -
       var(--spectrum-global-dimension-static-font-size-100, 14px) / 2);
-  min-width: calc(calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150)) + var(--spectrum-global-dimension-size-700) -
+      min-width: calc(calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150)) + var(--spectrum-global-dimension-size-700) -
       var(--spectrum-global-dimension-static-font-size-100, 14px) / 2);
-}
-
-.rQp3-W_spectrum-Datepicker--range .rQp3-W_spectrum-InputGroup-field {
-  width: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150));
-  min-width: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150));
-  flex: initial;
-}
-
-.rQp3-W_spectrum-Datepicker--range .rQp3-W_spectrum-Datepicker-startField .rQp3-W_spectrum-InputGroup-field {
-  border-inline-end: 0;
-  padding-inline-end: var(--spectrum-global-dimension-size-150);
-}
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range .rQp3-W_spectrum-Datepicker-startField svg {
-  display: none;
-}
+  & .rQp3-W_spectrum-InputGroup-field {
+    width: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150));
+    min-width: calc(var(--spectrum-global-dimension-size-1600) - 2 * var(--spectrum-global-dimension-size-150));
+    flex: initial;
+  }
 
-.rQp3-W_spectrum-Datepicker--range .rQp3-W_spectrum-Datepicker-endField .rQp3-W_spectrum-InputGroup-input {
-  border-inline-start: 0;
-  border-radius: 0;
-  flex: 1;
-  padding-inline-start: var(--spectrum-global-dimension-size-150);
-}
+  & .rQp3-W_spectrum-Datepicker-startField {
+    & .rQp3-W_spectrum-InputGroup-field {
+      border-inline-end: 0;
+      padding-inline-end: var(--spectrum-global-dimension-size-150);
+    }
 
-.rQp3-W_spectrum-Datepicker--range .rQp3-W_spectrum-Datepicker--rangeDash {
-  line-height: calc(var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height)) - var(--spectrum-global-dimension-size-100));
-  flex: initial;
-  z-index: 1;
-  width: 0;
-  padding-top: 0;
-}
+    & svg {
+      display: none;
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range .rQp3-W_spectrum-Datepicker--rangeDash:before {
-  content: "–";
-  margin: 0 calc(-.5 * var(--spectrum-global-dimension-static-font-size-100, 14px));
-  text-align: center;
-  vertical-align: middle;
-  width: var(--spectrum-global-dimension-static-font-size-100, 14px);
-  display: inline-block;
-  overflow: hidden;
-}
+  & .rQp3-W_spectrum-Datepicker-endField {
+    & .rQp3-W_spectrum-InputGroup-input {
+      border-inline-start: 0;
+      border-radius: 0;
+      flex: 1;
+      padding-inline-start: var(--spectrum-global-dimension-size-150);
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_is-focused .rQp3-W_spectrum-Datepicker-focusRing {
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-}
+  & .rQp3-W_spectrum-Datepicker--rangeDash {
+    line-height: calc(var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height)) - var(--spectrum-global-dimension-size-100));
+    flex: initial;
+    z-index: 1;
+    width: 0;
+    padding-top: 0;
+
+    &:before {
+      content: "–";
+      margin: 0 calc(-.5 * var(--spectrum-global-dimension-static-font-size-100, 14px));
+      text-align: center;
+      vertical-align: middle;
+      width: var(--spectrum-global-dimension-static-font-size-100, 14px);
+      display: inline-block;
+      overflow: hidden;
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-focused .rQp3-W_spectrum-Datepicker-focusRing {
-  border-radius: 0;
-  top: auto;
-}
+  &.rQp3-W_is-focused {
+    & .rQp3-W_spectrum-Datepicker-focusRing {
+      border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-Datepicker--rangeDash:before {
-  margin-inline-start: calc(-.5 * var(--spectrum-global-dimension-static-font-size-100, 14px));
+  &.rQp3-W_spectrum-InputGroup--quiet {
+    &.rQp3-W_is-focused {
+      & .rQp3-W_spectrum-Datepicker-focusRing {
+        border-radius: 0;
+        top: auto;
+      }
+    }
+
+    & .rQp3-W_spectrum-Datepicker--rangeDash {
+      &:before {
+        margin-inline-start: calc(-.5 * var(--spectrum-global-dimension-static-font-size-100, 14px));
+      }
+    }
+  }
 }
 
 .rQp3-W_spectrum-InputGroup {
   --spectrum-inputgroup-border-color-focus: var(--spectrum-alias-input-border-color-key-focus);
   background: var(--spectrum-textfield-background-color, var(--spectrum-global-color-gray-50));
-}
 
-.rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-InputGroup-input:focus {
-  border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
-}
+  & .rQp3-W_spectrum-FieldButton {
+    &:before {
+      border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_is-focused:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-disabled) .rQp3-W_spectrum-InputGroup-input, .rQp3-W_spectrum-InputGroup.rQp3-W_is-focused:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-disabled) .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  & .rQp3-W_spectrum-InputGroup-input:focus {
+    border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_is-hovered:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-focused):not(.rQp3-W_is-disabled) .rQp3-W_spectrum-InputGroup-input, .rQp3-W_spectrum-InputGroup.rQp3-W_is-hovered:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-focused):not(.rQp3-W_is-disabled) .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-textfield-border-color-hover, var(--spectrum-alias-border-color-hover));
-}
+  &.rQp3-W_is-focused {
+    &:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-disabled) {
+      & .rQp3-W_spectrum-InputGroup-input {
+        border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+
+      & .rQp3-W_spectrum-FieldButton {
+        &:before {
+          border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-InputGroup-input, .rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-InputGroup-input:focus {
-  border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
-}
+  &.rQp3-W_is-hovered {
+    &:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-focused):not(.rQp3-W_is-disabled) {
+      & .rQp3-W_spectrum-InputGroup-input, & .rQp3-W_spectrum-FieldButton:before {
+        border-color: var(--spectrum-textfield-border-color-hover, var(--spectrum-alias-border-color-hover));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-hovered .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-hovered .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
-}
+  &.rQp3-W_spectrum-InputGroup--invalid {
+    & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input, & .rQp3-W_spectrum-InputGroup-input:focus {
+      border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
+    }
+
+    &.rQp3-W_is-hovered {
+      & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+        border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
+      }
+    }
+
+    &:active {
+      & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+        border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid:active .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid:active .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
+  &.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--quiet) {
+    & .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: #0000;
+      }
+    }
+  }
 }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton:before {
-  border-color: #0000;
-}
+.rQp3-W_spectrum-InputGroup.rQp3-W_is-focused {
+  & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+    border-color: var(--spectrum-inputgroup-border-color-focus);
+  }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_is-focused .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup.rQp3-W_is-focused .rQp3-W_spectrum-InputGroup-input, .rQp3-W_spectrum-InputGroup.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-inputgroup-border-color-focus);
+  &.rQp3-W_spectrum-InputGroup--invalid {
+    & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+      border-color: var(--spectrum-inputgroup-border-color-focus);
+    }
+  }
 }
 
-.rQp3-W_spectrum-InputGroup.rQp3-W_focus-ring:not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton {
-  z-index: 1;
+.rQp3-W_spectrum-InputGroup.rQp3-W_focus-ring:not(.rQp3-W_spectrum-InputGroup--quiet) {
+  & .rQp3-W_spectrum-FieldButton {
+    z-index: 1;
+  }
 }
 
 .rQp3-W_spectrum-InputGroup--quiet {
   background: none;
-}
-
-.rQp3-W_spectrum-InputGroup--quiet:not(.rQp3-W_is-disabled):not(.rQp3-W_is-focused) .rQp3-W_spectrum-FieldButton:disabled:before, .rQp3-W_spectrum-InputGroup--quiet:not(.rQp3-W_is-disabled):not(.rQp3-W_is-focused) .rQp3-W_spectrum-FieldButton:disabled.rQp3-W_is-hovered:before, :is(.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton, .rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton.rQp3-W_is-hovered, .rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:focus, .rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:active, .rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton.rQp3-W_is-selected, .rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton.rQp3-W_spectrum-FieldButton--invalid):before {
-  border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
-}
-
-:is(.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:disabled, .rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:disabled.rQp3-W_is-hovered):before, .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-disabled .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
-}
-
-.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-hovered:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-focused):not(.rQp3-W_is-disabled) .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-textfield-quiet-border-color-hover, var(--spectrum-alias-border-color-hover));
-}
-
-.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
-}
-
-.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-hovered .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-hovered .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
-}
-
-.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid:active .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup--invalid:active .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
-}
-
-.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_is-focused .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_focus-ring .rQp3-W_spectrum-InputGroup-input {
-  box-shadow: none !important;
-}
-
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_is-disabled .rQp3-W_spectrum-Datepicker--rangeDash {
-  color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
-}
+  &:not(.rQp3-W_is-disabled):not(.rQp3-W_is-focused) {
+    & .rQp3-W_spectrum-FieldButton {
+      &:disabled:before, &:disabled.rQp3-W_is-hovered:before {
+        border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_focus-ring {
-  box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  & .rQp3-W_spectrum-FieldButton {
+    &, &.rQp3-W_is-hovered, &:focus, &:active, &.rQp3-W_is-selected, &.rQp3-W_spectrum-FieldButton--invalid {
+      &:before {
+        border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+      }
+    }
+
+    &:disabled, &:disabled.rQp3-W_is-hovered {
+      &:before {
+        border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_focus-ring.rQp3-W_spectrum-InputGroup--invalid, .rQp3-W_spectrum-Datepicker--range.rQp3-W_focus-ring.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton {
-  box-shadow: 0 0 0 1px var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.rQp3-W_is-disabled {
+    & .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-InputGroup-input {
-  border-color: var(--spectrum-dropdown-border-color-error, var(--spectrum-global-color-red-500));
-}
+  &.rQp3-W_is-hovered:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_is-focused):not(.rQp3-W_is-disabled) {
+    & .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: var(--spectrum-textfield-quiet-border-color-hover, var(--spectrum-alias-border-color-hover));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_focus-ring .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  &.rQp3-W_spectrum-InputGroup.rQp3-W_spectrum-InputGroup {
+    &.rQp3-W_spectrum-InputGroup--invalid {
+      & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+        border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
+      }
+
+      &.rQp3-W_is-hovered {
+        & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+          border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
+        }
+      }
+
+      &:active {
+        & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+          border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
+        }
+      }
+    }
+
+    &.rQp3-W_is-focused {
+      & .rQp3-W_spectrum-FieldButton:before {
+        border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+
+      &.rQp3-W_spectrum-InputGroup--invalid {
+        & .rQp3-W_spectrum-FieldButton:before, & .rQp3-W_spectrum-InputGroup-input {
+          border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
+  }
 }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_focus-ring .rQp3-W_spectrum-FieldButton {
-  box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+.rQp3-W_spectrum-Datepicker--range {
+  &.rQp3-W_focus-ring {
+    & .rQp3-W_spectrum-InputGroup-input {
+      box-shadow: none !important;
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-dropdown-border-color-error, var(--spectrum-global-color-red-500));
-}
+  &.rQp3-W_is-disabled {
+    & .rQp3-W_spectrum-Datepicker--rangeDash {
+      color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton.rQp3-W_spectrum-FieldButton--invalid.rQp3-W_focus-ring {
-  border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.rQp3-W_focus-ring {
+    box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-focused {
-  box-shadow: 0 1px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+    &.rQp3-W_spectrum-InputGroup--invalid {
+      box-shadow: 0 0 0 1px var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton {
-  box-shadow: none;
-}
-
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before {
-  border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+      & .rQp3-W_spectrum-FieldButton {
+        box-shadow: 0 0 0 1px var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton.rQp3-W_spectrum-FieldButton--invalid.rQp3-W_focus-ring {
-  box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
+  &.rQp3-W_spectrum-InputGroup--invalid {
+    & .rQp3-W_spectrum-InputGroup-input {
+      border-color: var(--spectrum-dropdown-border-color-error, var(--spectrum-global-color-red-500));
+    }
+
+    &.rQp3-W_focus-ring {
+      & .rQp3-W_spectrum-FieldButton {
+        &:before {
+          border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+
+        box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+
+    & .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: var(--spectrum-dropdown-border-color-error, var(--spectrum-global-color-red-500));
+      }
+
+      &.rQp3-W_spectrum-FieldButton--invalid {
+        &.rQp3-W_focus-ring {
+          border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+          box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
+  }
 
-.rQp3-W_spectrum-Datepicker--range.rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-focused.rQp3-W_spectrum-InputGroup--invalid.rQp3-W_focus-ring {
-  box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  &.rQp3-W_spectrum-InputGroup--quiet {
+    &.rQp3-W_is-focused {
+      box-shadow: 0 1px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+
+      &.rQp3-W_spectrum-InputGroup--invalid {
+        & .rQp3-W_spectrum-FieldButton {
+          box-shadow: none;
+
+          &:before {
+            border-color: var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+          }
+
+          &.rQp3-W_spectrum-FieldButton--invalid {
+            &.rQp3-W_focus-ring {
+              box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+            }
+          }
+        }
+
+        &.rQp3-W_focus-ring {
+          box-shadow: 0 0 0 1px var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
+  }
 }
 
 @media (forced-colors: active) {
@@ -410,56 +550,96 @@
     --spectrum-textfield-text-color-disabled: GrayText;
     --spectrum-inputgroup-border-color-focus: Highlight;
     forced-color-adjust: none;
-  }
-
-  .rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-InputGroup-input {
-    forced-color-adjust: auto;
-    --spectrum-textfield-border-color: ButtonText;
-    --spectrum-textfield-background-color-disabled: Canvas;
-  }
 
-  .rQp3-W_spectrum-InputGroup .rQp3-W_spectrum-FieldButton {
-    forced-color-adjust: auto;
-    --spectrum-fieldbutton-background-color: Canvas;
-    --spectrum-fieldbutton-quiet-background-color: Canvas;
-    --spectrum-fieldbutton-icon-color: ButtonText;
-    --spectrum-fieldbutton-background-color-down: Canvas;
-    --spectrum-fieldbutton-quiet-background-color-down: Canvas;
-    --spectrum-fieldbutton-icon-color-down: ButtonText;
-    --spectrum-fieldbutton-background-color-disabled: Canvas;
-    --spectrum-fieldbutton-quiet-background-color-disabled: Canvas;
-    --spectrum-fieldbutton-background-color-hover: Canvas;
-    --spectrum-fieldbutton-quiet-background-color-hover: Canvas;
-    --spectrum-fieldbutton-icon-color-hover: ButtonText;
-    background-clip: unset;
+    & .rQp3-W_spectrum-InputGroup-input {
+      forced-color-adjust: auto;
+      --spectrum-textfield-border-color: ButtonText;
+      --spectrum-textfield-background-color-disabled: Canvas;
+    }
+
+    & .rQp3-W_spectrum-FieldButton {
+      forced-color-adjust: auto;
+      --spectrum-fieldbutton-background-color: Canvas;
+      --spectrum-fieldbutton-quiet-background-color: Canvas;
+      --spectrum-fieldbutton-icon-color: ButtonText;
+      --spectrum-fieldbutton-background-color-down: Canvas;
+      --spectrum-fieldbutton-quiet-background-color-down: Canvas;
+      --spectrum-fieldbutton-icon-color-down: ButtonText;
+      --spectrum-fieldbutton-background-color-disabled: Canvas;
+      --spectrum-fieldbutton-quiet-background-color-disabled: Canvas;
+      --spectrum-fieldbutton-background-color-hover: Canvas;
+      --spectrum-fieldbutton-quiet-background-color-hover: Canvas;
+      --spectrum-fieldbutton-icon-color-hover: ButtonText;
+      background-clip: unset;
+    }
+
+    &.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: graytext;
+      }
+    }
   }
 
-  .rQp3-W_spectrum-InputGroup.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--invalid):not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton:before {
-    border-color: graytext;
+  .rQp3-W_spectrum-InputGroup--quiet {
+    &:not(.rQp3-W_is-disabled) {
+      & .rQp3-W_spectrum-FieldButton {
+        &:disabled, &:disabled.rQp3-W_is-hovered {
+          &:before {
+            border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+          }
+        }
+      }
+    }
+
+    &.rQp3-W_is-disabled {
+      & .rQp3-W_spectrum-FieldButton {
+        &:before {
+          border-color: graytext;
+        }
+      }
+    }
   }
 
-  :is(.rQp3-W_spectrum-InputGroup--quiet:not(.rQp3-W_is-disabled) .rQp3-W_spectrum-FieldButton:disabled, .rQp3-W_spectrum-InputGroup--quiet:not(.rQp3-W_is-disabled) .rQp3-W_spectrum-FieldButton:disabled.rQp3-W_is-hovered):before {
-    border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+  .rQp3-W_spectrum-InputGroup--invalid {
+    & .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: highlight;
+      }
+    }
+
+    &.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-InputGroup-input {
+      border-color: graytext;
+    }
+
+    &.rQp3-W_is-disabled {
+      &.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-InputGroup-input {
+        border-color: graytext;
+      }
+
+      &.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton {
+        &:before {
+          border-color: graytext;
+        }
+      }
+    }
+
+    &.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton {
+      &:before {
+        border-color: graytext;
+      }
+    }
   }
 
-  .rQp3-W_spectrum-InputGroup--quiet.rQp3-W_is-disabled .rQp3-W_spectrum-FieldButton:before {
-    border-color: graytext;
-  }
-
-  .rQp3-W_spectrum-InputGroup--invalid .rQp3-W_spectrum-FieldButton:before {
-    border-color: highlight;
-  }
-
-  .rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-InputGroup-input, .rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-disabled.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-InputGroup-input, .rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-disabled.rQp3-W_spectrum-InputGroup--quiet .rQp3-W_spectrum-FieldButton:before, .rQp3-W_spectrum-InputGroup--invalid.rQp3-W_is-disabled:not(.rQp3-W_spectrum-InputGroup--quiet) .rQp3-W_spectrum-FieldButton:before {
-    border-color: graytext;
-  }
-
-  .rQp3-W_spectrum-InputGroup.rQp3-W_focus-ring:not(.rQp3-W_spectrum-InputGroup--quiet) {
-    outline: 2px solid highlight;
-  }
-
-  .rQp3-W_spectrum-InputGroup.rQp3-W_focus-ring.rQp3-W_spectrum-InputGroup--quiet {
-    box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+  .rQp3-W_spectrum-InputGroup {
+    &.rQp3-W_focus-ring {
+      &:not(.rQp3-W_spectrum-InputGroup--quiet) {
+        outline: 2px solid highlight;
+      }
+
+      &.rQp3-W_spectrum-InputGroup--quiet {
+        box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
   }
 }
 /*# sourceMappingURL=inputgroup_vars.css.map */