@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/stepper_vars.css

@@ -1,38 +1,38 @@
 .cgr_3G_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.cgr_3G_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;
+  }
 
-.cgr_3G_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;
+  }
 
-.cgr_3G_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;
+  }
 
-.cgr_3G_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;
+  }
 
-.cgr_3G_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;
+  }
 
-.cgr_3G_i18nFontFamily:lang(zh-SG), .cgr_3G_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;
+  }
 
-.cgr_3G_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;
+  }
 
-.cgr_3G_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;
+  }
 }
 
 .cgr_3G_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)));
-}
 
-.cgr_3G_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;
+  }
 }
 
-.cgr_3G_spectrum-FocusRing.cgr_3G_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);
+.cgr_3G_spectrum-FocusRing {
+  &.cgr_3G_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);
+    }
+  }
 }
 
-.cgr_3G_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.cgr_3G_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.cgr_3G_spectrum-FocusRing--quiet.cgr_3G_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &.cgr_3G_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) {
   .cgr_3G_spectrum-FocusRing, .cgr_3G_spectrum-FocusRing-ring, .cgr_3G_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.cgr_3G_spectrum-FocusRing, .cgr_3G_spectrum-FocusRing-ring, .cgr_3G_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -98,13 +106,11 @@
   display: inline-flex;
   position: relative;
   overflow: visible;
-}
 
-button.cgr_3G_spectrum-BaseButton {
-  -webkit-appearance: button;
-}
+  button& {
+    -webkit-appearance: button;
+  }
 
-.cgr_3G_spectrum-BaseButton {
   vertical-align: top;
   transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out,
     border-color var(--spectrum-global-animation-duration-100, .13s) ease-out,
@@ -117,33 +123,33 @@ button.cgr_3G_spectrum-BaseButton {
   isolation: isolate;
   line-height: 1.3;
   text-decoration: none;
-}
 
-.cgr_3G_spectrum-BaseButton:focus {
-  outline: none;
-}
+  &:focus {
+    outline: none;
+  }
 
-.cgr_3G_spectrum-BaseButton.cgr_3G_focus-ring {
-  z-index: 3;
-}
+  &.cgr_3G_focus-ring {
+    z-index: 3;
+  }
 
-.cgr_3G_spectrum-BaseButton::-moz-focus-inner {
-  border: 0;
-  margin-block: -2px;
-  padding: 0;
-}
+  &::-moz-focus-inner {
+    border: 0;
+    margin-block: -2px;
+    padding: 0;
+  }
 
-.cgr_3G_spectrum-BaseButton:disabled, .cgr_3G_spectrum-BaseButton.cgr_3G_is-disabled {
-  cursor: default;
-}
+  &:disabled, &.cgr_3G_is-disabled {
+    cursor: default;
+  }
 
-.cgr_3G_spectrum-BaseButton .cgr_3G_spectrum-Icon {
-  max-block-size: 100%;
-  transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  & .cgr_3G_spectrum-Icon {
+    max-block-size: 100%;
+    transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out,
       fill var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  box-sizing: initial;
-  flex-shrink: 0;
-  order: 0;
+    box-sizing: initial;
+    flex-shrink: 0;
+    order: 0;
+  }
 }
 
 .cgr_3G_spectrum-Button {
@@ -159,36 +165,38 @@ button.cgr_3G_spectrum-BaseButton {
   border-style: solid;
   padding-block-start: calc(var(--spectrum-global-dimension-size-50) - 1px);
   padding-block-end: calc(var(--spectrum-global-dimension-size-50) + 1px);
-}
 
-.cgr_3G_spectrum-Button.cgr_3G_is-hovered, .cgr_3G_spectrum-Button:active {
-  box-shadow: none;
-}
+  &.cgr_3G_is-hovered, &:active {
+    box-shadow: none;
+  }
 
-.cgr_3G_spectrum-Button .cgr_3G_spectrum-Icon + .cgr_3G_spectrum-Button-label {
-  margin-inline-start: var(--spectrum-button-primary-text-gap, var(--spectrum-global-dimension-size-100));
-}
+  & .cgr_3G_spectrum-Icon + .cgr_3G_spectrum-Button-label {
+    margin-inline-start: var(--spectrum-button-primary-text-gap, var(--spectrum-global-dimension-size-100));
+  }
 
-.cgr_3G_spectrum-Button .cgr_3G_spectrum-Button-label + .cgr_3G_spectrum-Icon {
-  margin-inline-end: var(--spectrum-button-primary-text-gap, var(--spectrum-global-dimension-size-100));
-}
+  & .cgr_3G_spectrum-Button-label + .cgr_3G_spectrum-Icon {
+    margin-inline-end: var(--spectrum-button-primary-text-gap, var(--spectrum-global-dimension-size-100));
+  }
 
-.cgr_3G_spectrum-Button.cgr_3G_spectrum-Button--iconOnly {
-  min-inline-size: unset;
-  padding: var(--spectrum-global-dimension-size-65);
-}
+  &.cgr_3G_spectrum-Button--iconOnly {
+    min-inline-size: unset;
+    padding: var(--spectrum-global-dimension-size-65);
+  }
 
-.cgr_3G_spectrum-Button .cgr_3G_spectrum-Button-circleLoader {
-  align-items: center;
-  display: flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+  & .cgr_3G_spectrum-Button-circleLoader {
+    align-items: center;
+    display: flex;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-.cgr_3G_spectrum-Button.cgr_3G_spectrum-Button--pending .cgr_3G_spectrum-Button-label, .cgr_3G_spectrum-Button.cgr_3G_spectrum-Button--pending .cgr_3G_spectrum-Icon {
-  opacity: 0;
+  &.cgr_3G_spectrum-Button--pending {
+    & .cgr_3G_spectrum-Button-label, & .cgr_3G_spectrum-Icon {
+      opacity: 0;
+    }
+  }
 }
 
 a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
@@ -207,34 +215,34 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
   font-weight: var(--spectrum-actionbutton-text-font-weight, var(--spectrum-alias-body-text-font-weight));
   padding: 0;
   position: relative;
-}
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-Icon {
-  padding-inline-start: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
-}
+  & .cgr_3G_spectrum-Icon {
+    padding-inline-start: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
+  }
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-ActionButton-label {
-  padding-inline-end: var(--spectrum-actionbutton-text-padding-x, var(--spectrum-global-dimension-size-150));
-}
+  & .cgr_3G_spectrum-ActionButton-label {
+    padding-inline-end: var(--spectrum-actionbutton-text-padding-x, var(--spectrum-global-dimension-size-150));
+  }
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-Icon + .cgr_3G_spectrum-ActionButton-label {
-  padding-inline-start: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
-}
+  & .cgr_3G_spectrum-Icon + .cgr_3G_spectrum-ActionButton-label {
+    padding-inline-start: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
+  }
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-ActionButton-label:not([hidden]) + .cgr_3G_spectrum-Icon {
-  padding-inline-end: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
-}
+  & .cgr_3G_spectrum-ActionButton-label:not([hidden]) + .cgr_3G_spectrum-Icon {
+    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
+  }
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-ActionButton-label:only-child, .cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-ActionButton-hold + .cgr_3G_spectrum-ActionButton-label:last-child {
-  padding-inline-start: var(--spectrum-actionbutton-text-padding-x, var(--spectrum-global-dimension-size-150));
-}
+  & .cgr_3G_spectrum-ActionButton-label:only-child, & .cgr_3G_spectrum-ActionButton-hold + .cgr_3G_spectrum-ActionButton-label:last-child {
+    padding-inline-start: var(--spectrum-actionbutton-text-padding-x, var(--spectrum-global-dimension-size-150));
+  }
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-Icon:only-child, .cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-ActionButton-hold + .cgr_3G_spectrum-Icon:last-child {
-  padding-inline-end: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
-}
+  & .cgr_3G_spectrum-Icon:only-child, & .cgr_3G_spectrum-ActionButton-hold + .cgr_3G_spectrum-Icon:last-child {
+    padding-inline-end: var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85));
+  }
 
-.cgr_3G_spectrum-ActionButton .cgr_3G_spectrum-ActionGroup-itemIcon.cgr_3G_spectrum-ActionGroup-itemIcon {
-  padding-inline-end: 0;
+  & .cgr_3G_spectrum-ActionGroup-itemIcon.cgr_3G_spectrum-ActionGroup-itemIcon {
+    padding-inline-end: 0;
+  }
 }
 
 .cgr_3G_spectrum-ActionButton-hold {
@@ -252,10 +260,10 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
   order: 1;
   place-self: center;
   inline-size: 100%;
-}
 
-:is(.cgr_3G_spectrum-ActionButton-label, .cgr_3G_spectrum-Button-label):empty {
-  display: none;
+  &:empty {
+    display: none;
+  }
 }
 
 .cgr_3G_spectrum-ActionButton-label {
@@ -291,6 +299,12 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
   cursor: default;
   --spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
   --spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
+  outline: none;
+  line-height: normal;
+  position: relative;
+}
+
+.cgr_3G_spectrum-FieldButton {
   padding-block: 0;
   padding-inline: var(--spectrum-dropdown-padding-x, var(--spectrum-global-dimension-size-150));
   --spectrum-button-border-width: var(--spectrum-dropdown-border-size, var(--spectrum-alias-border-size-thin));
@@ -299,19 +313,16 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
     box-shadow var(--spectrum-global-animation-duration-100, .13s),
     border-color var(--spectrum-global-animation-duration-100, .13s);
   border-style: solid;
-  outline: none;
   margin: 0;
-  line-height: normal;
-  position: relative;
-}
 
-.cgr_3G_spectrum-FieldButton:disabled, .cgr_3G_spectrum-FieldButton.cgr_3G_is-disabled {
-  cursor: default;
-  border-width: 0;
-}
+  &:disabled, &.cgr_3G_is-disabled {
+    cursor: default;
+    border-width: 0;
+  }
 
-.cgr_3G_spectrum-FieldButton.cgr_3G_is-open {
-  border-width: var(--spectrum-dropdown-border-size, var(--spectrum-alias-border-size-thin));
+  &.cgr_3G_is-open {
+    border-width: var(--spectrum-dropdown-border-size, var(--spectrum-alias-border-size-thin));
+  }
 }
 
 .cgr_3G_spectrum-FieldButton--quiet {
@@ -320,10 +331,12 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
   --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25));
   margin: 0;
   padding: 0;
-}
 
-:is(.cgr_3G_spectrum-FieldButton--quiet:disabled, .cgr_3G_spectrum-FieldButton--quiet.cgr_3G_is-disabled).cgr_3G_focus-ring {
-  box-shadow: none;
+  &:disabled, &.cgr_3G_is-disabled {
+    &.cgr_3G_focus-ring {
+      box-shadow: none;
+    }
+  }
 }
 
 .cgr_3G_spectrum-ClearButton {
@@ -334,37 +347,41 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
   border: none;
   margin: 0;
   padding: 0;
-}
-
-.cgr_3G_spectrum-ClearButton > .cgr_3G_spectrum-Icon {
-  margin-block: 0;
-  margin-inline: auto;
-}
 
-.cgr_3G_spectrum-ClearButton.cgr_3G_spectrum-ClearButton--inset.cgr_3G_spectrum-ClearButton--inset {
-  box-sizing: border-box;
-  transition: unset;
-}
-
-.cgr_3G_spectrum-ClearButton.cgr_3G_spectrum-ClearButton--inset.cgr_3G_spectrum-ClearButton--inset:after {
-  aspect-ratio: 1;
-  height: calc(100% - 2px);
-  top: 50%;
-  left: 50%;
-  right: unset;
-  bottom: unset;
-  margin: 0;
-  transition: unset;
-  transform: translate(-50%, -50%);
-}
+  & > .cgr_3G_spectrum-Icon {
+    margin-block: 0;
+    margin-inline: auto;
+  }
 
-.cgr_3G_spectrum-ClearButton.cgr_3G_spectrum-ClearButton--inset.cgr_3G_spectrum-ClearButton--inset.cgr_3G_focus-ring:after {
-  box-shadow: inset 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+  &.cgr_3G_spectrum-ClearButton--inset.cgr_3G_spectrum-ClearButton--inset {
+    box-sizing: border-box;
+    transition: unset;
+
+    &:after {
+      aspect-ratio: 1;
+      height: calc(100% - 2px);
+      top: 50%;
+      left: 50%;
+      right: unset;
+      bottom: unset;
+      margin: 0;
+      transition: unset;
+      transform: translate(-50%, -50%);
+    }
+
+    &.cgr_3G_focus-ring {
+      &:after {
+        box-shadow: inset 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
+      }
+    }
+  }
 }
 
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .cgr_3G_spectrum-ClearButton > .cgr_3G_spectrum-Icon {
-    margin: 0;
+  .cgr_3G_spectrum-ClearButton {
+    & > .cgr_3G_spectrum-Icon {
+      margin: 0;
+    }
   }
 }
 
@@ -382,295 +399,387 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
   line-height: 0;
   display: inline-grid;
   position: relative;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isMobile) {
-  grid-template: "cgr_3G_field cgr_3G_increment"
-                 "cgr_3G_field cgr_3G_decrement"
-                 / 1fr auto;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button--stepUp {
-  padding-block-start: calc(var(--spectrum-global-dimension-size-50) + 1px);
-  padding-block-end: calc(var(--spectrum-global-dimension-size-50) - .5px);
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button--stepDown {
-  padding-block-start: calc(var(--spectrum-global-dimension-size-50) - .5px);
-  padding-block-end: calc(var(--spectrum-global-dimension-size-50) + .5px);
-}
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isMobile {
-  --spectrum-stepper-width: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) * 5);
-  grid-template: "cgr_3G_decrement cgr_3G_field cgr_3G_increment"
-  / auto 1fr auto;
-}
-
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-field {
-  inline-size: unset;
-  min-inline-size: var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400));
-  grid-area: cgr_3G_field;
-}
+  &:not(.cgr_3G_spectrum-Stepper--isMobile) {
+    grid-template: "cgr_3G_field cgr_3G_increment"
+                   "cgr_3G_field cgr_3G_decrement"
+                   / 1fr auto;
 
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-icon {
-  padding-inline-end: 0;
-}
+    & .cgr_3G_spectrum-Stepper-button--stepUp {
+      padding-block-start: calc(var(--spectrum-global-dimension-size-50) + 1px);
+      padding-block-end: calc(var(--spectrum-global-dimension-size-50) - .5px);
+    }
 
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button--stepUp {
-  grid-area: cgr_3G_increment;
-}
-
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button--stepDown {
-  grid-area: cgr_3G_decrement;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) {
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-icon {
-  inset-inline-end: var(--spectrum-global-dimension-size-100);
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):not(.cgr_3G_spectrum-Stepper--showStepper):not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button {
-  block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
-  inline-size: 24px;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):not(.cgr_3G_spectrum-Stepper--showStepper).cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-button {
-  block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
-  inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-input {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button {
-  block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
-  border-inline-start-width: 0;
-  inline-size: 24px;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button--stepDown {
-  border-block-start-width: 1px;
-  border-block-end-width: var(--spectrum-alias-input-border-size);
-  border-inline-end-width: var(--spectrum-alias-input-border-size);
-  border-end-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button--stepUp {
-  border-block-start-width: var(--spectrum-alias-input-border-size);
-  border-inline-end-width: var(--spectrum-alias-input-border-size);
-  border-start-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper.cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-input {
-  border-radius: 0;
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper.cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-button {
-  block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
-  inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper.cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-button--stepDown {
-  border-block-start-width: var(--spectrum-alias-input-border-size);
-  border-block-end-width: var(--spectrum-alias-input-border-size);
-  border-inline-start-width: var(--spectrum-alias-input-border-size);
-  border-start-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  border-end-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_spectrum-Stepper--showStepper.cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-button--stepUp {
-  border-block-start-width: var(--spectrum-alias-input-border-size);
-  border-block-end-width: var(--spectrum-alias-input-border-size);
-  border-inline-end-width: var(--spectrum-alias-input-border-size);
-  border-start-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  border-end-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-}
+    & .cgr_3G_spectrum-Stepper-button--stepDown {
+      padding-block-start: calc(var(--spectrum-global-dimension-size-50) - .5px);
+      padding-block-end: calc(var(--spectrum-global-dimension-size-50) + .5px);
+    }
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-icon {
-  inset-inline-end: 0;
-}
+  &.cgr_3G_spectrum-Stepper--isMobile {
+    --spectrum-stepper-width: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) * 5);
+    grid-template: "cgr_3G_decrement cgr_3G_field cgr_3G_increment"
+    / auto 1fr auto;
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:not(.cgr_3G_spectrum-Stepper--showStepper):not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button {
-  block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
-  inline-size: 24px;
-}
+  & .cgr_3G_spectrum-Stepper-field {
+    inline-size: unset;
+    min-inline-size: var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400));
+    grid-area: cgr_3G_field;
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:not(.cgr_3G_spectrum-Stepper--showStepper):not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button--stepDown {
-  border-block-end-width: var(--spectrum-alias-input-border-size);
-}
+  & .cgr_3G_spectrum-Stepper-icon {
+    padding-inline-end: 0;
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:not(.cgr_3G_spectrum-Stepper--showStepper).cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-button {
-  block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
-  inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
-  border-block-end-width: var(--spectrum-alias-input-border-size);
-}
+  & .cgr_3G_spectrum-Stepper-button--stepUp {
+    grid-area: cgr_3G_increment;
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_spectrum-Stepper--showStepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button {
-  block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
-  inline-size: 24px;
-}
+  & .cgr_3G_spectrum-Stepper-button--stepDown {
+    grid-area: cgr_3G_decrement;
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_spectrum-Stepper--showStepper:not(.cgr_3G_spectrum-Stepper--isMobile) .cgr_3G_spectrum-Stepper-button--stepDown {
-  border-block-end-width: var(--spectrum-alias-input-border-size);
-}
+  &:not(.cgr_3G_spectrum-Stepper--isQuiet) {
+    border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+
+    & .cgr_3G_spectrum-Stepper-icon {
+      inset-inline-end: var(--spectrum-global-dimension-size-100);
+    }
+
+    &:not(.cgr_3G_spectrum-Stepper--showStepper) {
+      &:not(.cgr_3G_spectrum-Stepper--isMobile) {
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
+          inline-size: 24px;
+        }
+      }
+
+      &.cgr_3G_spectrum-Stepper--isMobile {
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+          inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
+        }
+      }
+    }
+
+    &.cgr_3G_spectrum-Stepper--showStepper {
+      &:not(.cgr_3G_spectrum-Stepper--isMobile) {
+        & .cgr_3G_spectrum-Stepper-input {
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+        }
+
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
+          border-inline-start-width: 0;
+          inline-size: 24px;
+        }
+
+        & .cgr_3G_spectrum-Stepper-button--stepDown {
+          border-block-start-width: 1px;
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+          border-inline-end-width: var(--spectrum-alias-input-border-size);
+          border-end-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+        }
+
+        & .cgr_3G_spectrum-Stepper-button--stepUp {
+          border-block-start-width: var(--spectrum-alias-input-border-size);
+          border-inline-end-width: var(--spectrum-alias-input-border-size);
+          border-start-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+        }
+      }
+
+      &.cgr_3G_spectrum-Stepper--isMobile {
+        & .cgr_3G_spectrum-Stepper-input {
+          border-radius: 0;
+        }
+
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+          inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
+        }
+
+        & .cgr_3G_spectrum-Stepper-button--stepDown {
+          border-block-start-width: var(--spectrum-alias-input-border-size);
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+          border-inline-start-width: var(--spectrum-alias-input-border-size);
+          border-start-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+          border-end-start-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+        }
+
+        & .cgr_3G_spectrum-Stepper-button--stepUp {
+          border-block-start-width: var(--spectrum-alias-input-border-size);
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+          border-inline-end-width: var(--spectrum-alias-input-border-size);
+          border-start-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+          border-end-end-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+        }
+      }
+    }
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_spectrum-Stepper--showStepper.cgr_3G_spectrum-Stepper--isMobile .cgr_3G_spectrum-Stepper-button {
-  block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
-  inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
-  border-block-end-width: var(--spectrum-alias-input-border-size);
+  &.cgr_3G_spectrum-Stepper--isQuiet {
+    & .cgr_3G_spectrum-Stepper-icon {
+      inset-inline-end: 0;
+    }
+
+    &:not(.cgr_3G_spectrum-Stepper--showStepper) {
+      &:not(.cgr_3G_spectrum-Stepper--isMobile) {
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
+          inline-size: 24px;
+        }
+
+        & .cgr_3G_spectrum-Stepper-button--stepDown {
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+        }
+      }
+
+      &.cgr_3G_spectrum-Stepper--isMobile {
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+          inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+        }
+      }
+    }
+
+    &.cgr_3G_spectrum-Stepper--showStepper {
+      &:not(.cgr_3G_spectrum-Stepper--isMobile) {
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) / 2);
+          inline-size: 24px;
+        }
+
+        & .cgr_3G_spectrum-Stepper-button--stepDown {
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+        }
+      }
+
+      &.cgr_3G_spectrum-Stepper--isMobile {
+        & .cgr_3G_spectrum-Stepper-button {
+          block-size: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
+          inline-size: var(--spectrum-actionbutton-min-width, var(--spectrum-global-dimension-size-400));
+          border-block-end-width: var(--spectrum-alias-input-border-size);
+        }
+      }
+    }
+  }
 }
 
-.cgr_3G_spectrum-Stepper-container.cgr_3G_spectrum-Stepper-container {
-  --spectrum-field-default-width: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) * 4);
-}
+.cgr_3G_spectrum-Stepper-container {
+  &.cgr_3G_spectrum-Stepper-container {
+    --spectrum-field-default-width: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) * 4);
+  }
 
-.cgr_3G_spectrum-Stepper-container.cgr_3G_spectrum-Stepper-container--isMobile {
-  --spectrum-field-default-width: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) * 5);
+  &.cgr_3G_spectrum-Stepper-container--isMobile {
+    --spectrum-field-default-width: calc(var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400)) * 5);
+  }
 }
 
 .cgr_3G_spectrum-Stepper-button {
   border-width: 0;
-}
 
-.cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper-button:active {
-  box-shadow: none;
-}
+  &.cgr_3G_is-hovered, &:active {
+    box-shadow: none;
+  }
 
-.cgr_3G_spectrum-Stepper-button .cgr_3G_spectrum-Stepper-button-icon {
-  max-block-size: 100%;
-  transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  & .cgr_3G_spectrum-Stepper-button-icon {
+    max-block-size: 100%;
+    transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out,
       fill var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  box-sizing: initial;
-  flex-shrink: 0;
-}
-
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button-icon {
-  fill: var(--spectrum-actionbutton-icon-color, var(--spectrum-alias-icon-color));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-input {
-  border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-button {
-  background-color: var(--spectrum-actionbutton-background-color, var(--spectrum-global-color-gray-75));
-  border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
-  color: var(--spectrum-actionbutton-text-color, var(--spectrum-alias-text-color));
-}
-
-:is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-hover, var(--spectrum-alias-border-color-hover));
-}
-
-:is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-active, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):active) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-active, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):active) .cgr_3G_spectrum-Stepper-button, :is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-focused, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):focus) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-focused, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):focus) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
-
-:is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-disabled, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):disabled) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-disabled, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):disabled) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-disabled, var(--spectrum-alias-border-color-transparent));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_is-hovered .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_is-hovered .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
-}
-
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid:active .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid:active .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
-}
-
-:is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_is-focused) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-invalid.cgr_3G_is-focused) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
-
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-input {
-  border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
-}
-
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-button {
-  background-color: unset;
-  border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
-  color: var(--spectrum-actionbutton-text-color, var(--spectrum-alias-text-color));
-}
-
-:is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-hover, var(--spectrum-alias-border-color-hover));
-}
-
-:is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-active, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:active) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-active, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:active) .cgr_3G_spectrum-Stepper-button, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-focused, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:focus) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-focused, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:focus) .cgr_3G_spectrum-Stepper-button, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
-
-:is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-disabled, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:disabled) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-disabled, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:disabled) .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
-}
-
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-error, var(--spectrum-semantic-negative-color-default));
-}
-
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid.cgr_3G_is-hovered .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid.cgr_3G_is-hovered .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
-}
-
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid:active .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid:active .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
-}
-
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid.cgr_3G_is-focused .cgr_3G_spectrum-Stepper-input, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-invalid.cgr_3G_is-focused .cgr_3G_spectrum-Stepper-button {
-  border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-}
-
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered {
-  color: var(--spectrum-actionbutton-text-color-hover, var(--spectrum-alias-text-color-hover));
-}
-
-:is(.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-button-icon {
-  fill: var(--spectrum-actionbutton-icon-color-hover, var(--spectrum-alias-icon-color-hover));
+    box-sizing: initial;
+    flex-shrink: 0;
+  }
 }
 
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-active {
-  color: var(--spectrum-actionbutton-text-color-down, var(--spectrum-alias-text-color-down));
-}
+.cgr_3G_spectrum-Stepper {
+  & .cgr_3G_spectrum-Stepper-button-icon {
+    fill: var(--spectrum-actionbutton-icon-color, var(--spectrum-alias-icon-color));
+  }
 
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-active .cgr_3G_spectrum-Stepper-button-icon {
-  fill: var(--spectrum-actionbutton-text-color-down, var(--spectrum-alias-text-color-down));
-}
+  &:not(.cgr_3G_spectrum-Stepper--isQuiet) {
+    & .cgr_3G_spectrum-Stepper-input {
+      border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
+    }
+
+    & .cgr_3G_spectrum-Stepper-button {
+      background-color: var(--spectrum-actionbutton-background-color, var(--spectrum-global-color-gray-75));
+      border-color: var(--spectrum-textfield-border-color, var(--spectrum-alias-border-color));
+      color: var(--spectrum-actionbutton-text-color, var(--spectrum-alias-text-color));
+    }
+
+    &.cgr_3G_is-hovered, &.cgr_3G_is-hovered {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-border-color-hover, var(--spectrum-alias-border-color-hover));
+      }
+    }
+
+    &.cgr_3G_is-active, &:active {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+
+    &.cgr_3G_is-focused, &:focus {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+
+    &.cgr_3G_is-disabled, &:disabled {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-border-color-disabled, var(--spectrum-alias-border-color-transparent));
+      }
+    }
+
+    &.cgr_3G_is-invalid {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-semantic-negative-color-default));
+      }
+
+      &.cgr_3G_is-hovered {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
+        }
+      }
+
+      &:active {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
+        }
+      }
+
+      &.cgr_3G_focus-ring, &.cgr_3G_focus-ring, &.cgr_3G_is-focused {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
+  }
 
-.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button:disabled, .cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-disabled {
-  color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+  &.cgr_3G_spectrum-Stepper--isQuiet {
+    & .cgr_3G_spectrum-Stepper-input {
+      border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+    }
+
+    & .cgr_3G_spectrum-Stepper-button {
+      background-color: unset;
+      border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+      color: var(--spectrum-actionbutton-text-color, var(--spectrum-alias-text-color));
+    }
+
+    &.cgr_3G_is-hovered, &.cgr_3G_is-hovered {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-quiet-border-color-hover, var(--spectrum-alias-border-color-hover));
+      }
+    }
+
+    &.cgr_3G_is-active, &:active {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+
+    &.cgr_3G_is-focused, &:focus {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+
+    &.cgr_3G_focus-ring, &.cgr_3G_focus-ring {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+      }
+    }
+
+    &.cgr_3G_is-disabled, &:disabled {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-quiet-border-color-disabled, var(--spectrum-alias-border-color-mid));
+      }
+    }
+
+    &.cgr_3G_is-invalid {
+      & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+        border-color: var(--spectrum-textfield-quiet-border-color-error, var(--spectrum-semantic-negative-color-default));
+      }
+
+      &.cgr_3G_is-hovered {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-quiet-border-color-error-hover, var(--spectrum-semantic-negative-color-state-hover));
+        }
+      }
+
+      &:active {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-quiet-border-color-error-down, var(--spectrum-semantic-negative-color-state-down));
+        }
+      }
+
+      &.cgr_3G_is-focused {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
+  }
 }
 
-:is(.cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button:disabled, .cgr_3G_spectrum-Stepper .cgr_3G_spectrum-Stepper-button.cgr_3G_is-disabled) .cgr_3G_spectrum-Stepper-button-icon {
-  fill: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
-}
+.cgr_3G_spectrum-Stepper {
+  & .cgr_3G_spectrum-Stepper-button {
+    &.cgr_3G_is-hovered, &.cgr_3G_is-hovered {
+      color: var(--spectrum-actionbutton-text-color-hover, var(--spectrum-alias-text-color-hover));
+
+      & .cgr_3G_spectrum-Stepper-button-icon {
+        fill: var(--spectrum-actionbutton-icon-color-hover, var(--spectrum-alias-icon-color-hover));
+      }
+    }
+
+    &.cgr_3G_is-active {
+      color: var(--spectrum-actionbutton-text-color-down, var(--spectrum-alias-text-color-down));
+
+      & .cgr_3G_spectrum-Stepper-button-icon {
+        fill: var(--spectrum-actionbutton-text-color-down, var(--spectrum-alias-text-color-down));
+      }
+    }
+
+    &:disabled, &.cgr_3G_is-disabled {
+      color: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+
+      & .cgr_3G_spectrum-Stepper-button-icon {
+        fill: var(--spectrum-textfield-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+      }
+    }
+  }
 
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-button.cgr_3G_is-hovered {
-  background-color: var(--spectrum-actionbutton-background-color-hover, var(--spectrum-global-color-gray-50));
-}
+  &:not(.cgr_3G_spectrum-Stepper--isQuiet) {
+    & .cgr_3G_spectrum-Stepper-button {
+      &.cgr_3G_is-hovered, &.cgr_3G_is-hovered {
+        background-color: var(--spectrum-actionbutton-background-color-hover, var(--spectrum-global-color-gray-50));
+      }
 
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-button.cgr_3G_is-active {
-  background-color: var(--spectrum-actionbutton-background-color-down, var(--spectrum-global-color-gray-200));
-}
+      &.cgr_3G_is-active {
+        background-color: var(--spectrum-actionbutton-background-color-down, var(--spectrum-global-color-gray-200));
+      }
 
-.cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-button:disabled, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet) .cgr_3G_spectrum-Stepper-button.cgr_3G_is-disabled {
-  background-color: var(--spectrum-textfield-background-color-disabled, var(--spectrum-global-color-gray-200));
-}
+      &:disabled, &.cgr_3G_is-disabled {
+        background-color: var(--spectrum-textfield-background-color-disabled, var(--spectrum-global-color-gray-200));
+      }
+    }
+  }
 
-.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-button:disabled, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-button.cgr_3G_is-disabled {
-  color: var(--spectrum-textfield-quiet-text-color-disabled, var(--spectrum-alias-text-color-disabled));
-}
+  &.cgr_3G_spectrum-Stepper--isQuiet {
+    & .cgr_3G_spectrum-Stepper-button {
+      &:disabled, &.cgr_3G_is-disabled {
+        color: var(--spectrum-textfield-quiet-text-color-disabled, var(--spectrum-alias-text-color-disabled));
 
-:is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-button:disabled, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-button.cgr_3G_is-disabled) .cgr_3G_spectrum-Stepper-button-icon {
-  fill: var(--spectrum-textfield-quiet-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+        & .cgr_3G_spectrum-Stepper-button-icon {
+          fill: var(--spectrum-textfield-quiet-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+        }
+      }
+    }
+  }
 }
 
 @media (forced-colors: active) {
@@ -686,28 +795,38 @@ a.cgr_3G_spectrum-Button, a.cgr_3G_spectrum-ActionButton {
     --spectrum-textfield-quiet-border-color: ButtonText;
     --spectrum-textfield-quiet-text-color-disabled: GrayText;
     --spectrum-textfield-text-color-disabled: GrayText;
-  }
-
-  .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet).cgr_3G_is-focused, .cgr_3G_spectrum-Stepper:not(.cgr_3G_spectrum-Stepper--isQuiet):focus {
-    outline: 2px solid highlight;
-  }
-
-  .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--readonly.cgr_3G_spectrum-Stepper--isQuiet .cgr_3G_spectrum-Stepper-button {
-    border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
-  }
-
-  .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-focused, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:focus, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring {
-    forced-color-adjust: none;
-    box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  }
-
-  :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-focused, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:focus, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-focused, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet:focus, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_focus-ring) .cgr_3G_spectrum-Stepper-button {
-    forced-color-adjust: auto;
-    border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
-  }
 
-  :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-input, :is(.cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered, .cgr_3G_spectrum-Stepper.cgr_3G_spectrum-Stepper--isQuiet.cgr_3G_is-hovered) .cgr_3G_spectrum-Stepper-button {
-    border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+    &:not(.cgr_3G_spectrum-Stepper--isQuiet) {
+      &.cgr_3G_is-focused, &:focus {
+        outline: 2px solid highlight;
+      }
+    }
+
+    &.cgr_3G_spectrum-Stepper--readonly {
+      &.cgr_3G_spectrum-Stepper--isQuiet {
+        & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-quiet-border-color, var(--spectrum-alias-border-color));
+        }
+      }
+    }
+
+    &.cgr_3G_spectrum-Stepper--isQuiet {
+      &.cgr_3G_is-focused, &:focus, &.cgr_3G_focus-ring, &.cgr_3G_focus-ring {
+        forced-color-adjust: none;
+        box-shadow: 0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          forced-color-adjust: auto;
+          border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+
+      &.cgr_3G_is-hovered, &.cgr_3G_is-hovered {
+        & .cgr_3G_spectrum-Stepper-input, & .cgr_3G_spectrum-Stepper-button {
+          border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
+        }
+      }
+    }
   }
 }
 /*# sourceMappingURL=stepper_vars.css.map */