@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/tabs_vars.css

@@ -1,38 +1,38 @@
 .XpGI7G_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-.XpGI7G_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;
+  }
 
-.XpGI7G_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;
+  }
 
-.XpGI7G_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;
+  }
 
-.XpGI7G_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;
+  }
 
-.XpGI7G_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;
+  }
 
-.XpGI7G_i18nFontFamily:lang(zh-SG), .XpGI7G_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;
+  }
 
-.XpGI7G_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;
+  }
 
-.XpGI7G_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;
+  }
 }
 
 .XpGI7G_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)));
-}
 
-.XpGI7G_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;
+  }
 }
 
-.XpGI7G_spectrum-FocusRing.XpGI7G_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);
+.XpGI7G_spectrum-FocusRing {
+  &.XpGI7G_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);
+    }
+  }
 }
 
-.XpGI7G_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+.XpGI7G_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-.XpGI7G_spectrum-FocusRing--quiet.XpGI7G_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &.XpGI7G_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) {
   .XpGI7G_spectrum-FocusRing, .XpGI7G_spectrum-FocusRing-ring, .XpGI7G_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(.XpGI7G_spectrum-FocusRing, .XpGI7G_spectrum-FocusRing-ring, .XpGI7G_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -116,37 +124,37 @@
   outline: none;
   text-decoration: none;
   position: relative;
-}
 
-.XpGI7G_spectrum-Tabs-item[href] {
-  cursor: pointer;
-}
+  &[href] {
+    cursor: pointer;
+  }
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-disabled {
-  cursor: default;
-}
+  &.XpGI7G_is-disabled {
+    cursor: default;
+  }
 
-.XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Icon {
-  block-size: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
-  transition: fill var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  transform: translate3d(0, 0, 0);
-}
+  & .XpGI7G_spectrum-Icon {
+    block-size: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
+    transition: fill var(--spectrum-global-animation-duration-100, .13s) ease-out;
+    transform: translate3d(0, 0, 0);
 
-.XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Icon + .XpGI7G_spectrum-Tabs-itemLabel {
-  margin-inline-start: var(--spectrum-tabs-icon-gap, var(--spectrum-global-dimension-size-100));
-}
+    & + .XpGI7G_spectrum-Tabs-itemLabel {
+      margin-inline-start: var(--spectrum-tabs-icon-gap, var(--spectrum-global-dimension-size-100));
+    }
+  }
 
-.XpGI7G_spectrum-Tabs-item:before {
-  content: "";
-  box-sizing: border-box;
-  border: var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent;
-  border-radius: var(--spectrum-tabs-focus-ring-border-radius);
-  pointer-events: none;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  inset-inline-start: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
-  inset-inline-end: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
+  &:before {
+    content: "";
+    box-sizing: border-box;
+    border: var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent;
+    border-radius: var(--spectrum-tabs-focus-ring-border-radius);
+    pointer-events: none;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    inset-inline-start: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
+    inset-inline-end: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
+  }
 }
 
 .XpGI7G_spectrum-Tabs-itemLabel {
@@ -154,10 +162,10 @@
   font-size: var(--spectrum-tabs-text-size, var(--spectrum-alias-font-size-default));
   font-weight: var(--spectrum-tabs-text-font-weight, var(--spectrum-alias-body-text-font-weight));
   display: inline-block;
-}
 
-.XpGI7G_spectrum-Tabs-itemLabel:empty {
-  display: none;
+  &:empty {
+    display: none;
+  }
 }
 
 .XpGI7G_spectrum-Tabs-selectionIndicator {
@@ -165,86 +173,90 @@
   transform-origin: 0 0;
   position: absolute;
   inset-inline-start: 0;
-}
 
-[dir="ltr"] .XpGI7G_spectrum-Tabs--horizontal .XpGI7G_spectrum-Tabs-selectionIndicator {
-  transform: translateX(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)));
-}
+  [dir="ltr"] .XpGI7G_spectrum-Tabs--horizontal & {
+    transform: translateX(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)));
+  }
 
-[dir="rtl"] .XpGI7G_spectrum-Tabs--horizontal .XpGI7G_spectrum-Tabs-selectionIndicator {
-  transform: translateX(calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1));
-}
+  [dir="rtl"] .XpGI7G_spectrum-Tabs--horizontal & {
+    transform: translateX(calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1));
+  }
 
-.XpGI7G_spectrum-Tabs-selectionIndicator {
   border-radius: var(--spectrum-tabs-rule-border-radius, var(--spectrum-global-dimension-static-size-10));
 }
 
-.XpGI7G_spectrum-Tabs--compact .XpGI7G_spectrum-Tabs-item {
-  block-size: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
-  line-height: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
-}
+.XpGI7G_spectrum-Tabs--compact {
+  & .XpGI7G_spectrum-Tabs-item {
+    block-size: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
+    line-height: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
 
-.XpGI7G_spectrum-Tabs--compact .XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Icon {
-  block-size: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
+    & .XpGI7G_spectrum-Icon {
+      block-size: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
+    }
+  }
 }
 
 .XpGI7G_spectrum-Tabs--horizontal {
   border-block-end: var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) solid;
   align-items: center;
-}
 
-.XpGI7G_spectrum-Tabs--horizontal .XpGI7G_spectrum-Tabs-item {
-  vertical-align: top;
-}
+  & .XpGI7G_spectrum-Tabs-item {
+    vertical-align: top;
 
-.XpGI7G_spectrum-Tabs--horizontal .XpGI7G_spectrum-Tabs-item + :not(.XpGI7G_spectrum-Tabs-selectionIndicator) {
-  margin-inline-start: var(--spectrum-tabs-item-gap, var(--spectrum-global-dimension-size-300));
-}
+    & + :not(.XpGI7G_spectrum-Tabs-selectionIndicator) {
+      margin-inline-start: var(--spectrum-tabs-item-gap, var(--spectrum-global-dimension-size-300));
+    }
 
-.XpGI7G_spectrum-Tabs--horizontal .XpGI7G_spectrum-Tabs-item:before {
-  top: 50%;
-  bottom: unset;
-  block-size: var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height));
-  margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)) / -2) +
+    &:before {
+      top: 50%;
+      bottom: unset;
+      block-size: var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height));
+      margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)) / -2) +
           calc(var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) / 2));
-}
+    }
+  }
 
-.XpGI7G_spectrum-Tabs--horizontal .XpGI7G_spectrum-Tabs-selectionIndicator {
-  block-size: var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick));
-  transition: transform var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out,
+  & .XpGI7G_spectrum-Tabs-selectionIndicator {
+    block-size: var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick));
+    transition: transform var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out,
       width var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out;
-  position: absolute;
-  inset-block-end: calc(var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) * -1);
-}
-
-.XpGI7G_spectrum-Tabs--horizontal.XpGI7G_spectrum-Tabs--isCollapsed {
-  block-size: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
-  inset-inline-start: 0;
-}
+    position: absolute;
+    inset-block-end: calc(var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) * -1);
+  }
 
-.XpGI7G_spectrum-Tabs--horizontal.XpGI7G_spectrum-Tabs--isCollapsed button:before {
-  content: "";
-  box-sizing: border-box;
-  block-size: var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height));
-  border: var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent;
-  border-radius: var(--spectrum-tabs-focus-ring-border-radius);
-  pointer-events: none;
-  top: 50%;
-  margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)) / -2) +
+  &.XpGI7G_spectrum-Tabs--isCollapsed {
+    block-size: calc(var(--spectrum-tabs-height, var(--spectrum-global-dimension-size-600)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
+    inset-inline-start: 0;
+
+    & button {
+      &:before {
+        content: "";
+        box-sizing: border-box;
+        block-size: var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height));
+        border: var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) solid transparent;
+        border-radius: var(--spectrum-tabs-focus-ring-border-radius);
+        pointer-events: none;
+        top: 50%;
+        margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height, var(--spectrum-alias-single-line-height)) / -2) +
             calc(var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)) / 2));
-  position: absolute;
-  inset-inline-start: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
-  inset-inline-end: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
-}
-
-.XpGI7G_spectrum-Tabs--horizontal.XpGI7G_spectrum-Tabs--isCollapsed.XpGI7G_spectrum-Tabs--compact button {
-  height: calc(calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))));
-}
+        position: absolute;
+        inset-inline-start: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
+        inset-inline-end: calc(var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)) * -1);
+      }
+    }
+
+    &.XpGI7G_spectrum-Tabs--compact {
+      & button {
+        height: calc(calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick))));
+      }
+    }
+  }
 
-.XpGI7G_spectrum-Tabs--horizontal.XpGI7G_spectrum-Tabs--compact {
-  box-sizing: content-box;
-  block-size: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
-  align-items: end;
+  &.XpGI7G_spectrum-Tabs--compact {
+    box-sizing: content-box;
+    block-size: calc(var(--spectrum-tabs-quiet-compact-height, var(--spectrum-global-dimension-size-400)) - var(--spectrum-tabs-rule-height, var(--spectrum-alias-border-size-thick)));
+    align-items: end;
+  }
 }
 
 .XpGI7G_spectrum-Tabs--quiet {
@@ -256,45 +268,47 @@
   flex-direction: column;
   padding: 0;
   display: inline-flex;
-}
 
-.XpGI7G_spectrum-Tabs--vertical .XpGI7G_spectrum-Tabs-item {
-  block-size: var(--spectrum-tabs-vertical-item-height, var(--spectrum-global-dimension-size-550));
-  padding: 0 var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100));
-  margin-block-end: var(--spectrum-tabs-vertical-item-gap, var(--spectrum-global-dimension-size-50));
-  margin-inline-start: calc(var(--spectrum-tabs-vertical-item-margin-left, var(--spectrum-global-dimension-size-150)) - var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)));
-}
+  & .XpGI7G_spectrum-Tabs-item {
+    block-size: var(--spectrum-tabs-vertical-item-height, var(--spectrum-global-dimension-size-550));
+    padding: 0 var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100));
+    margin-block-end: var(--spectrum-tabs-vertical-item-gap, var(--spectrum-global-dimension-size-50));
+    margin-inline-start: calc(var(--spectrum-tabs-vertical-item-margin-left, var(--spectrum-global-dimension-size-150)) - var(--spectrum-tabs-focus-ring-padding-x, var(--spectrum-global-dimension-size-100)));
 
-.XpGI7G_spectrum-Tabs--vertical .XpGI7G_spectrum-Tabs-item:before {
-  inset-inline-start: calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) * -1);
-  inset-inline-end: calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) * -1);
-}
+    &:before {
+      inset-inline-start: calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) * -1);
+      inset-inline-end: calc(var(--spectrum-tabs-focus-ring-size, var(--spectrum-alias-border-size-thick)) * -1);
+    }
+  }
 
-.XpGI7G_spectrum-Tabs--vertical:not(.XpGI7G_spectrum-Tabs--compact) .XpGI7G_spectrum-Tabs-item {
-  white-space: normal;
-  block-size: auto;
-  min-height: var(--spectrum-tabs-vertical-item-height, var(--spectrum-global-dimension-size-550));
-  align-items: center;
-  line-height: normal;
-  display: flex;
-}
+  &:not(.XpGI7G_spectrum-Tabs--compact) .XpGI7G_spectrum-Tabs-item {
+    white-space: normal;
+    block-size: auto;
+    min-height: var(--spectrum-tabs-vertical-item-height, var(--spectrum-global-dimension-size-550));
+    align-items: center;
+    line-height: normal;
+    display: flex;
+  }
 
-.XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--compact .XpGI7G_spectrum-Tabs-item {
-  block-size: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400));
-  line-height: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400));
-  margin-block-end: var(--spectrum-tabs-compact-vertical-item-gap, var(--spectrum-global-dimension-size-50));
-}
+  &.XpGI7G_spectrum-Tabs--compact {
+    & .XpGI7G_spectrum-Tabs-item {
+      block-size: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400));
+      line-height: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400));
+      margin-block-end: var(--spectrum-tabs-compact-vertical-item-gap, var(--spectrum-global-dimension-size-50));
 
-.XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--compact .XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Icon {
-  block-size: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400));
-}
+      & .XpGI7G_spectrum-Icon {
+        block-size: var(--spectrum-tabs-compact-vertical-item-height, var(--spectrum-global-dimension-size-400));
+      }
+    }
+  }
 
-.XpGI7G_spectrum-Tabs--vertical .XpGI7G_spectrum-Tabs-selectionIndicator {
-  inline-size: var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick));
-  transition: transform var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out,
+  & .XpGI7G_spectrum-Tabs-selectionIndicator {
+    inline-size: var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick));
+    transition: transform var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out,
       height var(--spectrum-tabs-selection-indicator-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out;
-  position: absolute;
-  inset-inline-start: calc(var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) * -1);
+    position: absolute;
+    inset-inline-start: calc(var(--spectrum-tabs-vertical-rule-width, var(--spectrum-alias-border-size-thick)) * -1);
+  }
 }
 
 .XpGI7G_spectrum-TabsPanel-collapseWrapper {
@@ -305,11 +319,11 @@
 .XpGI7G_spectrum-TabsPanel-tabs {
   flex-grow: 1;
   flex-shrink: 0;
-}
 
-.XpGI7G_spectrum-TabsPanel-tabs.XpGI7G_spectrum-Tabs--vertical {
-  flex-grow: 0;
-  min-width: min-content;
+  &.XpGI7G_spectrum-Tabs--vertical {
+    flex-grow: 0;
+    min-width: min-content;
+  }
 }
 
 .XpGI7G_spectrum-TabsPanel-tabpanel {
@@ -317,32 +331,40 @@
   flex-grow: 1;
 }
 
-.XpGI7G_spectrum-TabsPanel--vertical .XpGI7G_spectrum-Tabs {
-  padding-right: var(--spectrum-global-dimension-size-160);
+.XpGI7G_spectrum-TabsPanel--vertical {
+  & .XpGI7G_spectrum-Tabs {
+    padding-right: var(--spectrum-global-dimension-size-160);
+  }
 }
 
 .XpGI7G_spectrum-Tabs {
   border-block-end-color: var(--spectrum-global-color-gray-300);
-}
 
-.XpGI7G_spectrum-Tabs.XpGI7G_spectrum-Tabs--isCollapsed .XpGI7G_spectrum-Tabs-picker {
-  width: auto;
-}
+  &.XpGI7G_spectrum-Tabs--isCollapsed {
+    & .XpGI7G_spectrum-Tabs-picker {
+      width: auto;
+    }
 
-.XpGI7G_spectrum-Tabs.XpGI7G_spectrum-Tabs--isCollapsed .XpGI7G_focus-ring:after {
-  box-shadow: none;
-}
+    & .XpGI7G_focus-ring {
+      &:after {
+        box-shadow: none;
+      }
 
-.XpGI7G_spectrum-Tabs.XpGI7G_spectrum-Tabs--isCollapsed .XpGI7G_focus-ring:before {
-  border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus));
+      &:before {
+        border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus));
+      }
+    }
+  }
 }
 
 .XpGI7G_spectrum-Tabs--vertical {
   border-inline-start-color: var(--spectrum-global-color-gray-300);
 }
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-selectionIndicator {
-  background-color: var(--spectrum-accent-color-900);
+.XpGI7G_spectrum-Tabs--emphasized {
+  & .XpGI7G_spectrum-Tabs-selectionIndicator {
+    background-color: var(--spectrum-accent-color-900);
+  }
 }
 
 .XpGI7G_spectrum-Tabs-selectionIndicator {
@@ -351,106 +373,118 @@
 
 .XpGI7G_spectrum-Tabs-item {
   color: var(--spectrum-tabs-text-color, var(--spectrum-alias-label-text-color));
-}
 
-.XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color));
-}
+  & .XpGI7G_spectrum-Icon {
+    fill: var(--spectrum-tabs-icon-color, var(--spectrum-alias-icon-color));
+  }
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-hovered {
-  color: var(--spectrum-tabs-text-color-hover, var(--spectrum-alias-text-color-hover));
-}
+  &.XpGI7G_is-hovered {
+    color: var(--spectrum-tabs-text-color-hover, var(--spectrum-alias-text-color-hover));
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-hovered .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-tabs-icon-color-hover, var(--spectrum-alias-icon-color-hover));
-}
+    & .XpGI7G_spectrum-Icon {
+      fill: var(--spectrum-tabs-icon-color-hover, var(--spectrum-alias-icon-color-hover));
+    }
+  }
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected {
-  color: var(--spectrum-tabs-text-color-selected, var(--spectrum-global-color-gray-900));
-}
+  &.XpGI7G_is-selected {
+    color: var(--spectrum-tabs-text-color-selected, var(--spectrum-global-color-gray-900));
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-tabs-icon-color-selected, var(--spectrum-global-color-gray-900));
-}
+    & .XpGI7G_spectrum-Icon {
+      fill: var(--spectrum-tabs-icon-color-selected, var(--spectrum-global-color-gray-900));
+    }
+  }
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_focus-ring {
-  color: var(--spectrum-tabs-text-color-key-focus, var(--spectrum-alias-text-color-hover));
-}
+  &.XpGI7G_focus-ring {
+    color: var(--spectrum-tabs-text-color-key-focus, var(--spectrum-alias-text-color-hover));
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_focus-ring:before {
-  border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus));
-}
+    &:before {
+      border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus));
+    }
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_focus-ring .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-tabs-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
-}
+    & .XpGI7G_spectrum-Icon {
+      fill: var(--spectrum-tabs-icon-color-key-focus, var(--spectrum-alias-icon-color-focus));
+    }
+  }
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-disabled {
-  color: var(--spectrum-tabs-text-color-disabled, var(--spectrum-alias-text-color-disabled));
-}
+  &.XpGI7G_is-disabled {
+    color: var(--spectrum-tabs-text-color-disabled, var(--spectrum-alias-text-color-disabled));
 
-.XpGI7G_spectrum-Tabs-item.XpGI7G_is-disabled .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-tabs-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
+    & .XpGI7G_spectrum-Icon {
+      fill: var(--spectrum-tabs-icon-color-disabled, var(--spectrum-alias-icon-color-disabled));
+    }
+  }
 }
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected {
-  color: var(--spectrum-accent-color-900);
-}
+.XpGI7G_spectrum-Tabs--emphasized {
+  & .XpGI7G_spectrum-Tabs-item {
+    &.XpGI7G_is-selected {
+      color: var(--spectrum-accent-color-900);
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-accent-color-900);
-}
+      & .XpGI7G_spectrum-Icon {
+        fill: var(--spectrum-accent-color-900);
+      }
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected.XpGI7G_focus-ring {
-  color: var(--spectrum-accent-color-900);
-}
+      &.XpGI7G_focus-ring {
+        color: var(--spectrum-accent-color-900);
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected.XpGI7G_focus-ring:before {
-  border-color: var(--spectrum-blue-900);
-}
+        &:before {
+          border-color: var(--spectrum-blue-900);
+        }
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected.XpGI7G_focus-ring .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-accent-color-900);
-}
+        & .XpGI7G_spectrum-Icon {
+          fill: var(--spectrum-accent-color-900);
+        }
+      }
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected.XpGI7G_is-hovered {
-  color: var(--spectrum-accent-color-1000);
-}
+      &.XpGI7G_is-hovered {
+        color: var(--spectrum-accent-color-1000);
 
-.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-item.XpGI7G_is-selected.XpGI7G_is-hovered .XpGI7G_spectrum-Icon {
-  fill: var(--spectrum-accent-color-1000);
+        & .XpGI7G_spectrum-Icon {
+          fill: var(--spectrum-accent-color-1000);
+        }
+      }
+    }
+  }
 }
 
 .XpGI7G_spectrum-Tabs--quiet {
   border-block-end-color: var(--spectrum-tabs-quiet-rule-color, var(--spectrum-alias-border-color-transparent));
-}
 
-.XpGI7G_spectrum-Tabs--quiet .XpGI7G_spectrum-Tabs-selectionIndicator {
-  background-color: var(--spectrum-tabs-quiet-selection-indicator-color, var(--spectrum-global-color-gray-900));
-}
+  & .XpGI7G_spectrum-Tabs-selectionIndicator {
+    background-color: var(--spectrum-tabs-quiet-selection-indicator-color, var(--spectrum-global-color-gray-900));
+  }
 
-.XpGI7G_spectrum-Tabs--quiet.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-selectionIndicator {
-  background-color: var(--spectrum-accent-color-900);
+  &.XpGI7G_spectrum-Tabs--emphasized {
+    & .XpGI7G_spectrum-Tabs-selectionIndicator {
+      background-color: var(--spectrum-accent-color-900);
+    }
+  }
 }
 
-.XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--quiet, .XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--compact {
-  border-inline-start-color: var(--spectrum-tabs-quiet-vertical-rule-color, var(--spectrum-alias-border-color-transparent));
-}
+.XpGI7G_spectrum-Tabs--vertical {
+  &.XpGI7G_spectrum-Tabs--quiet, &.XpGI7G_spectrum-Tabs--compact {
+    border-inline-start-color: var(--spectrum-tabs-quiet-vertical-rule-color, var(--spectrum-alias-border-color-transparent));
 
-:is(.XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--quiet, .XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--compact) .XpGI7G_spectrum-Tabs-selectionIndicator {
-  background-color: var(--spectrum-tabs-quiet-selection-indicator-color, var(--spectrum-global-color-gray-900));
-}
+    & .XpGI7G_spectrum-Tabs-selectionIndicator {
+      background-color: var(--spectrum-tabs-quiet-selection-indicator-color, var(--spectrum-global-color-gray-900));
+    }
+  }
 
-.XpGI7G_spectrum-Tabs--vertical.XpGI7G_spectrum-Tabs--emphasized .XpGI7G_spectrum-Tabs-selectionIndicator {
-  background-color: var(--spectrum-accent-color-900);
+  &.XpGI7G_spectrum-Tabs--emphasized {
+    & .XpGI7G_spectrum-Tabs-selectionIndicator {
+      background-color: var(--spectrum-accent-color-900);
+    }
+  }
 }
 
-.XpGI7G_spectrum-TabsPanel-tabpanel:focus {
-  outline: none;
-}
+.XpGI7G_spectrum-TabsPanel-tabpanel {
+  &:focus {
+    outline: none;
+  }
 
-.XpGI7G_spectrum-TabsPanel-tabpanel.XpGI7G_focus-ring {
-  border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus));
+  &.XpGI7G_focus-ring {
+    border-color: var(--spectrum-tabs-focus-ring-color, var(--spectrum-alias-border-color-focus));
+  }
 }
 
 @media (forced-colors: active) {
@@ -473,36 +507,40 @@
     --spectrum-tabs-text-color-key-focus: ButtonText;
     --spectrum-tabs-text-color-selected: HighlightText;
     --spectrum-tabs-vertical-rule-color: transparent;
-  }
 
-  .XpGI7G_spectrum-Tabs .XpGI7G_spectrum-Tabs-item:before {
-    background-color: buttonface;
-  }
-
-  .XpGI7G_spectrum-Tabs .XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Icon, .XpGI7G_spectrum-Tabs .XpGI7G_spectrum-Tabs-item .XpGI7G_spectrum-Tabs-itemLabel {
-    z-index: 1;
-    position: relative;
-  }
-
-  .XpGI7G_spectrum-Tabs .XpGI7G_is-selected {
-    color: highlighttext;
-  }
-
-  .XpGI7G_spectrum-Tabs .XpGI7G_is-selected .XpGI7G_spectrum-Icon {
-    fill: highlighttext;
-  }
-
-  .XpGI7G_spectrum-Tabs .XpGI7G_is-selected:before {
-    color: highlighttext;
-    background-color: highlight;
-  }
-
-  .XpGI7G_spectrum-Tabs .XpGI7G_is-selected .XpGI7G_spectrum-Tabs-itemLabel {
-    color: highlighttext;
-  }
-
-  .XpGI7G_spectrum-Tabs.XpGI7G_spectrum-Tabs--isCollapsed .XpGI7G_focus-ring {
-    outline: none;
+    & .XpGI7G_spectrum-Tabs-item {
+      &:before {
+        background-color: buttonface;
+      }
+
+      & .XpGI7G_spectrum-Icon, & .XpGI7G_spectrum-Tabs-itemLabel {
+        z-index: 1;
+        position: relative;
+      }
+    }
+
+    & .XpGI7G_is-selected {
+      color: highlighttext;
+
+      & .XpGI7G_spectrum-Icon {
+        fill: highlighttext;
+      }
+
+      &:before {
+        color: highlighttext;
+        background-color: highlight;
+      }
+
+      & .XpGI7G_spectrum-Tabs-itemLabel {
+        color: highlighttext;
+      }
+    }
+
+    &.XpGI7G_spectrum-Tabs--isCollapsed {
+      & .XpGI7G_focus-ring {
+        outline: none;
+      }
+    }
   }
 }
 /*# sourceMappingURL=tabs_vars.css.map */