@adobe/react-spectrum 3.47.1 → 3.47.2

package/dist/private/slider_vars.css

@@ -1,38 +1,38 @@
 ._3e7nca_i18nFontFamily {
   font-synthesis: weight;
   font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
-}
 
-._3e7nca_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;
+  }
 
-._3e7nca_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;
+  }
 
-._3e7nca_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;
+  }
 
-._3e7nca_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;
+  }
 
-._3e7nca_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;
+  }
 
-._3e7nca_i18nFontFamily:lang(zh-SG), ._3e7nca_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;
+  }
 
-._3e7nca_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;
+  }
 
-._3e7nca_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;
+  }
 }
 
 ._3e7nca_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)));
-}
 
-._3e7nca_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;
+  }
 }
 
-._3e7nca_spectrum-FocusRing._3e7nca_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);
+._3e7nca_spectrum-FocusRing {
+  &._3e7nca_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);
+    }
+  }
 }
 
-._3e7nca_spectrum-FocusRing--quiet:after {
-  border-radius: 0;
-}
+._3e7nca_spectrum-FocusRing--quiet {
+  &:after {
+    border-radius: 0;
+  }
 
-._3e7nca_spectrum-FocusRing--quiet._3e7nca_focus-ring:after {
-  margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size))
+  &._3e7nca_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) {
   ._3e7nca_spectrum-FocusRing, ._3e7nca_spectrum-FocusRing-ring, ._3e7nca_spectrum-FocusRing--quiet {
     --spectrum-high-contrast-focus-ring-color: Highlight;
-  }
 
-  :is(._3e7nca_spectrum-FocusRing, ._3e7nca_spectrum-FocusRing-ring, ._3e7nca_spectrum-FocusRing--quiet):after {
-    forced-color-adjust: none;
+    &:after {
+      forced-color-adjust: none;
+    }
   }
 }
 
@@ -90,39 +98,39 @@
   flex-shrink: 0;
   display: block;
   position: relative;
-}
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionTop {
-  width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
-  flex-direction: column;
-  display: inline-flex;
-}
+  &._3e7nca_spectrum-Slider--positionTop {
+    width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
+    flex-direction: column;
+    display: inline-flex;
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionTop ._3e7nca_spectrum-Slider-controls {
-  width: calc(100% - calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2)) * 2);
-}
+    & ._3e7nca_spectrum-Slider-controls {
+      width: calc(100% - calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2)) * 2);
+    }
+  }
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionSide {
-  align-items: center;
-  width: auto;
-  display: inline-flex;
-}
+  &._3e7nca_spectrum-Slider--positionSide {
+    align-items: center;
+    width: auto;
+    display: inline-flex;
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionSide ._3e7nca_spectrum-Slider-controls {
-  width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
-  flex: 1;
-}
+    & ._3e7nca_spectrum-Slider-controls {
+      width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
+      flex: 1;
+    }
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionSide ._3e7nca_spectrum-Slider-labelContainer {
-  margin-inline-end: calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) / 2);
-}
+    & ._3e7nca_spectrum-Slider-labelContainer {
+      margin-inline-end: calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) / 2);
+    }
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionSide ._3e7nca_spectrum-Slider-valueLabelContainer {
-  margin-inline-start: calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) / 2);
-}
+    & ._3e7nca_spectrum-Slider-valueLabelContainer {
+      margin-inline-start: calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) / 2);
+    }
 
-._3e7nca_spectrum-Slider._3e7nca_spectrum-Slider--positionSide ._3e7nca_spectrum-Slider-value {
-  text-align: start;
+    & ._3e7nca_spectrum-Slider-value {
+      text-align: start;
+    }
+  }
 }
 
 ._3e7nca_spectrum-Slider-controls {
@@ -152,22 +160,22 @@
   padding-block: 0;
   padding-inline: 0 calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)));
   margin-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
-}
 
-:is(._3e7nca_spectrum-Slider-track, ._3e7nca_spectrum-Slider-buffer, ._3e7nca_spectrum-Slider-fill):before {
-  content: "";
-  block-size: 100%;
-  display: block;
-}
+  &:before {
+    content: "";
+    block-size: 100%;
+    display: block;
+  }
 
-:is(._3e7nca_spectrum-Slider-track, ._3e7nca_spectrum-Slider-buffer, ._3e7nca_spectrum-Slider-fill):first-of-type:before {
-  border-start-start-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
-  border-end-start-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
-}
+  &:first-of-type:before {
+    border-start-start-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
+    border-end-start-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
+  }
 
-:is(._3e7nca_spectrum-Slider-track, ._3e7nca_spectrum-Slider-buffer, ._3e7nca_spectrum-Slider-fill):last-of-type:before {
-  border-start-end-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
-  border-end-end-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
+  &:last-of-type:before {
+    border-start-end-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
+    border-end-end-radius: var(--spectrum-slider-track-border-radius, var(--spectrum-global-dimension-static-size-10));
+  }
 }
 
 ._3e7nca_spectrum-Slider-fill {
@@ -201,31 +209,33 @@
   padding-block: 0;
   padding-inline: calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) + calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2)) 0;
   margin-inline-end: 0;
-}
 
-._3e7nca_spectrum-Slider-buffer ~ ._3e7nca_spectrum-Slider-buffer:after {
-  display: none;
+  &:after {
+    display: none;
+  }
 }
 
-._3e7nca_spectrum-Slider--range ._3e7nca_spectrum-Slider-track {
-  padding-block: 0;
-  padding-inline: calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) + calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2))
+._3e7nca_spectrum-Slider--range {
+  & ._3e7nca_spectrum-Slider-track {
+    padding-block: 0;
+    padding-inline: calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) + calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2))
       calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)) + calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2));
-  inset-inline: auto;
-}
-
-._3e7nca_spectrum-Slider--range ._3e7nca_spectrum-Slider-track:first-of-type {
-  padding-block: 0;
-  padding-inline: 0 calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)));
-  margin-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
-  inset-inline: 0 auto;
-}
-
-._3e7nca_spectrum-Slider--range ._3e7nca_spectrum-Slider-track:last-of-type {
-  padding-block: 0;
-  padding-inline: calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker))) 0;
-  margin-inline-end: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
-  inset-inline: auto 0;
+    inset-inline: auto;
+
+    &:first-of-type {
+      padding-block: 0;
+      padding-inline: 0 calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker)));
+      margin-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
+      inset-inline: 0 auto;
+    }
+
+    &:last-of-type {
+      padding-block: 0;
+      padding-inline: calc(var(--spectrum-slider-handle-gap, var(--spectrum-alias-border-size-thicker))) 0;
+      margin-inline-end: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
+      inset-inline: auto 0;
+    }
+  }
 }
 
 ._3e7nca_spectrum-Slider-buffer {
@@ -239,12 +249,12 @@
   inset-block-start: calc(var(--spectrum-slider-ramp-track-height, var(--spectrum-global-dimension-static-size-200)) / 2);
   inset-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
   inset-inline-end: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
-}
 
-._3e7nca_spectrum-Slider-ramp svg {
-  block-size: 100%;
-  inline-size: 100%;
-  transform: logical rotate(0deg);
+  & svg {
+    block-size: 100%;
+    inline-size: 100%;
+    transform: logical rotate(0deg);
+  }
 }
 
 ._3e7nca_spectrum-Slider-handle {
@@ -260,34 +270,36 @@
   display: inline-block;
   position: absolute;
   inset-block-start: calc(var(--spectrum-slider-height, var(--spectrum-alias-single-line-height)) / 2);
-}
 
-._3e7nca_spectrum-Slider-handle:active, ._3e7nca_spectrum-Slider-handle._3e7nca_is-dragged {
-  border-width: var(--spectrum-slider-handle-border-size-down, var(--spectrum-global-dimension-size-75));
-}
+  &:active, &._3e7nca_is-dragged {
+    border-width: var(--spectrum-slider-handle-border-size-down, var(--spectrum-global-dimension-size-75));
+  }
 
-._3e7nca_spectrum-Slider-handle:active, ._3e7nca_spectrum-Slider-handle._3e7nca_is-focused, ._3e7nca_spectrum-Slider-handle._3e7nca_is-dragged, ._3e7nca_spectrum-Slider-handle._3e7nca_is-tophandle {
-  z-index: 3;
-}
+  &:active, &._3e7nca_is-focused, &._3e7nca_is-dragged, &._3e7nca_is-tophandle {
+    z-index: 3;
+  }
 
-._3e7nca_spectrum-Slider-handle:before {
-  content: " ";
-  transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
+  &:before {
+    content: " ";
+    transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out,
       width var(--spectrum-global-animation-duration-100, .13s) ease-out,
       height var(--spectrum-global-animation-duration-100, .13s) ease-out;
-  width: var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200));
-  height: var(--spectrum-slider-handle-height, var(--spectrum-global-dimension-size-200));
-  border-radius: 100%;
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
+    width: var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200));
+    height: var(--spectrum-slider-handle-height, var(--spectrum-global-dimension-size-200));
+    border-radius: 100%;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-._3e7nca_spectrum-Slider-handle._3e7nca_is-focused:before {
-  width: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
-  height: calc(var(--spectrum-slider-handle-height, var(--spectrum-global-dimension-size-200)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
+  &._3e7nca_is-focused {
+    &:before {
+      width: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
+      height: calc(var(--spectrum-slider-handle-height, var(--spectrum-global-dimension-size-200)) + var(--spectrum-alias-focus-ring-gap, var(--spectrum-global-dimension-static-size-25)) * 2);
+    }
+  }
 }
 
 ._3e7nca_spectrum-Slider-input {
@@ -304,10 +316,10 @@
   inset-block-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2) / 4);
   inset-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / -2) / 4);
   overflow: hidden;
-}
 
-._3e7nca_spectrum-Slider-input:focus {
-  outline: none;
+  &:focus {
+    outline: none;
+  }
 }
 
 ._3e7nca_spectrum-Slider-labelContainer, ._3e7nca_spectrum-Slider-valueLabelContainer {
@@ -361,71 +373,79 @@
 ._3e7nca_spectrum-Slider-tick {
   inline-size: var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick));
   position: relative;
-}
 
-._3e7nca_spectrum-Slider-tick:after {
-  content: "";
-  inline-size: var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick));
-  block-size: var(--spectrum-slider-tick-mark-height, 10px);
-  border-radius: var(--spectrum-slider-tick-mark-border-radius, var(--spectrum-alias-border-radius-xsmall));
-  display: block;
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: calc(50% - calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) / 2));
-}
+  &:after {
+    content: "";
+    inline-size: var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick));
+    block-size: var(--spectrum-slider-tick-mark-height, 10px);
+    border-radius: var(--spectrum-slider-tick-mark-border-radius, var(--spectrum-alias-border-radius-xsmall));
+    display: block;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(50% - calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) / 2));
+  }
 
-._3e7nca_spectrum-Slider-tick ._3e7nca_spectrum-Slider-tickLabel {
-  margin-block: var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) 0;
-  margin-inline: calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) * -1)
+  & ._3e7nca_spectrum-Slider-tickLabel {
+    margin-block: var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) 0;
+    margin-inline: calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) * -1)
       calc(var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) * -1);
-  font-size: var(--spectrum-label-text-size, var(--spectrum-global-dimension-font-size-75));
-  line-height: var(--spectrum-label-text-line-height, var(--spectrum-global-font-line-height-small));
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
+    font-size: var(--spectrum-label-text-size, var(--spectrum-global-dimension-font-size-75));
+    line-height: var(--spectrum-label-text-line-height, var(--spectrum-global-font-line-height-small));
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
 
-:is(._3e7nca_spectrum-Slider-tick:first-of-type, ._3e7nca_spectrum-Slider-tick:last-of-type) ._3e7nca_spectrum-Slider-tickLabel {
-  margin-block: var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) 0;
-  margin-inline: 0;
-  display: block;
-  position: absolute;
-}
+  &:first-of-type, &:last-of-type {
+    & ._3e7nca_spectrum-Slider-tickLabel {
+      margin-block: var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200)) 0;
+      margin-inline: 0;
+      display: block;
+      position: absolute;
+    }
+  }
 
-._3e7nca_spectrum-Slider-tick:first-of-type ._3e7nca_spectrum-Slider-tickLabel {
-  inset-inline-start: 0;
-}
+  &:first-of-type {
+    & ._3e7nca_spectrum-Slider-tickLabel {
+      inset-inline-start: 0;
+    }
+  }
 
-._3e7nca_spectrum-Slider-tick:last-of-type ._3e7nca_spectrum-Slider-tickLabel {
-  inset-inline-end: 0;
+  &:last-of-type {
+    & ._3e7nca_spectrum-Slider-tickLabel {
+      inset-inline-end: 0;
+    }
+  }
 }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-labelContainer {
-  padding-block-end: var(--spectrum-fieldlabel-padding-bottom, var(--spectrum-global-dimension-size-65));
-}
+._3e7nca_spectrum-Slider--color {
+  & ._3e7nca_spectrum-Slider-labelContainer {
+    padding-block-end: var(--spectrum-fieldlabel-padding-bottom, var(--spectrum-global-dimension-size-65));
+  }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-controls, ._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-controls:before, ._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-track {
-  min-block-size: auto;
-  block-size: var(--spectrum-slider-color-track-height, var(--spectrum-global-dimension-static-size-300));
-  inline-size: 100%;
-  margin-inline-start: 0;
-}
+  & ._3e7nca_spectrum-Slider-controls, & ._3e7nca_spectrum-Slider-controls:before, & ._3e7nca_spectrum-Slider-track {
+    min-block-size: auto;
+    block-size: var(--spectrum-slider-color-track-height, var(--spectrum-global-dimension-static-size-300));
+    inline-size: 100%;
+    margin-inline-start: 0;
+  }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-controls:before {
-  content: "";
-  display: block;
-}
+  & ._3e7nca_spectrum-Slider-controls:before {
+    content: "";
+    display: block;
+  }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-controls:before, ._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-track {
-  border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
-  margin-block-start: 0;
-  margin-inline-end: 0;
-  padding: 0;
-  inset-block-start: 0;
-}
+  & ._3e7nca_spectrum-Slider-controls:before, & ._3e7nca_spectrum-Slider-track {
+    border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
+    margin-block-start: 0;
+    margin-inline-end: 0;
+    padding: 0;
+    inset-block-start: 0;
+  }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle {
-  inset-block-start: 50%;
+  & ._3e7nca_spectrum-Slider-handle {
+    inset-block-start: 50%;
+  }
 }
 
 ._3e7nca_spectrum-Dial {
@@ -441,8 +461,10 @@
   margin-block-end: var(--spectrum-global-dimension-size-65);
 }
 
-._3e7nca_spectrum-Dial-label:only-child {
-  text-align: center;
+._3e7nca_spectrum-Dial-label {
+  &:only-child {
+    text-align: center;
+  }
 }
 
 ._3e7nca_spectrum-Dial-controls {
@@ -455,26 +477,26 @@
   margin: 0;
   display: inline-block;
   position: relative;
-}
 
-._3e7nca_spectrum-Dial-controls:before, ._3e7nca_spectrum-Dial-controls:after {
-  content: "";
-  inline-size: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * 2);
-  block-size: var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick));
-  border-radius: var(--spectrum-slider-tick-mark-border-radius, var(--spectrum-alias-border-radius-xsmall));
-  position: absolute;
-  inset-block-end: 0;
-}
+  &:before, &:after {
+    content: "";
+    inline-size: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * 2);
+    block-size: var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick));
+    border-radius: var(--spectrum-slider-tick-mark-border-radius, var(--spectrum-alias-border-radius-xsmall));
+    position: absolute;
+    inset-block-end: 0;
+  }
 
-._3e7nca_spectrum-Dial-controls:before {
-  transform: rotate(var(--spectrum-dial-min-max-tick-angles, 45deg));
-  inset-inline-start: auto;
-  inset-inline-end: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * -1);
-}
+  &:before {
+    transform: rotate(var(--spectrum-dial-min-max-tick-angles, 45deg));
+    inset-inline-start: auto;
+    inset-inline-end: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * -1);
+  }
 
-._3e7nca_spectrum-Dial-controls:after {
-  transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles, 45deg)));
-  inset-inline-start: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * -1);
+  &:after {
+    transform: rotate(calc(-1 * var(--spectrum-dial-min-max-tick-angles, 45deg)));
+    inset-inline-start: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * -1);
+  }
 }
 
 ._3e7nca_spectrum-Dial-handle {
@@ -492,24 +514,24 @@
   inset-block-end: var(--spectrum-global-dimension-size-100);
   inset-inline-start: var(--spectrum-global-dimension-size-100);
   inset-inline-end: var(--spectrum-global-dimension-size-100);
-}
 
-._3e7nca_spectrum-Dial-handle:after {
-  content: "";
-  inline-size: var(--spectrum-dial-handle-marker-width, 12px);
-  block-size: var(--spectrum-dial-handle-marker-height, var(--spectrum-alias-border-size-thick));
-  border-radius: var(--spectrum-dial-handle-marker-border-radius, var(--spectrum-alias-border-radius-xsmall));
-  transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out;
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * -1);
-  transform: translateY(-50%);
-}
+  &:after {
+    content: "";
+    inline-size: var(--spectrum-dial-handle-marker-width, 12px);
+    block-size: var(--spectrum-dial-handle-marker-height, var(--spectrum-alias-border-size-thick));
+    border-radius: var(--spectrum-dial-handle-marker-border-radius, var(--spectrum-alias-border-radius-xsmall));
+    transition: background-color var(--spectrum-slider-animation-duration, var(--spectrum-global-animation-duration-100)) ease-in-out;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--spectrum-slider-tick-mark-width, var(--spectrum-alias-border-size-thick)) * -1);
+    transform: translateY(-50%);
+  }
 
-._3e7nca_spectrum-Dial-handle:active, ._3e7nca_spectrum-Dial-handle._3e7nca_is-focused, ._3e7nca_spectrum-Dial-handle._3e7nca_is-dragged {
-  border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick));
-  cursor: ns-resize;
-  cursor: grabbing;
+  &:active, &._3e7nca_is-focused, &._3e7nca_is-dragged {
+    border-width: var(--spectrum-slider-handle-border-size, var(--spectrum-alias-border-size-thick));
+    cursor: ns-resize;
+    cursor: grabbing;
+  }
 }
 
 ._3e7nca_spectrum-Dial-input {
@@ -519,22 +541,30 @@
   inset-inline-start: 0;
 }
 
-._3e7nca_spectrum-Dial--small ._3e7nca_spectrum-Dial-controls {
-  inline-size: var(--spectrum-dial-small-width, var(--spectrum-global-dimension-static-size-300));
-  block-size: var(--spectrum-dial-small-height, var(--spectrum-global-dimension-static-size-300));
+._3e7nca_spectrum-Dial--small {
+  & ._3e7nca_spectrum-Dial-controls {
+    inline-size: var(--spectrum-dial-small-width, var(--spectrum-global-dimension-static-size-300));
+    block-size: var(--spectrum-dial-small-height, var(--spectrum-global-dimension-static-size-300));
+  }
 }
 
-:is(._3e7nca_spectrum-Slider, ._3e7nca_spectrum-Dial)._3e7nca_is-disabled {
-  cursor: default;
-}
+._3e7nca_spectrum-Slider, ._3e7nca_spectrum-Dial {
+  &._3e7nca_is-disabled {
+    cursor: default;
 
-:is(._3e7nca_spectrum-Slider, ._3e7nca_spectrum-Dial)._3e7nca_is-disabled ._3e7nca_spectrum-Slider-handle {
-  cursor: default;
-  pointer-events: none;
-}
+    & ._3e7nca_spectrum-Slider-handle {
+      cursor: default;
+      pointer-events: none;
+    }
 
-:is(._3e7nca_spectrum-Slider, ._3e7nca_spectrum-Dial)._3e7nca_is-disabled._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle._3e7nca_is-hovered, :is(._3e7nca_spectrum-Slider, ._3e7nca_spectrum-Dial)._3e7nca_is-disabled._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle:active {
-  border-width: var(--spectrum-slider-color-handle-outset-border-size, var(--spectrum-alias-border-size-thin));
+    &._3e7nca_spectrum-Slider--color {
+      & ._3e7nca_spectrum-Slider-handle {
+        &._3e7nca_is-hovered, &:active {
+          border-width: var(--spectrum-slider-color-handle-outset-border-size, var(--spectrum-alias-border-size-thin));
+        }
+      }
+    }
+  }
 }
 
 ._3e7nca_u-isGrabbing {
@@ -543,100 +573,139 @@
   cursor: grabbing;
   -webkit-user-select: none;
   user-select: none;
-}
 
-._3e7nca_u-isGrabbing ._3e7nca_spectrum-Dial ._3e7nca_spectrum-Dial-label, ._3e7nca_u-isGrabbing ._3e7nca_spectrum-Dial ._3e7nca_spectrum-Dial-value, ._3e7nca_u-isGrabbing ._3e7nca_spectrum-Slider ._3e7nca_spectrum-Slider-label, ._3e7nca_u-isGrabbing ._3e7nca_spectrum-Slider ._3e7nca_spectrum-Slider-value {
-  cursor: inherit;
-}
+  & ._3e7nca_spectrum-Dial {
+    & ._3e7nca_spectrum-Dial-label, & ._3e7nca_spectrum-Dial-value {
+      cursor: inherit;
+    }
+  }
 
-._3e7nca_spectrum-Slider-controls:before, ._3e7nca_spectrum-Slider-controls:after {
-  content: "";
-  inline-size: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2);
-  block-size: 100%;
-  display: block;
-  position: absolute;
+  & ._3e7nca_spectrum-Slider {
+    & ._3e7nca_spectrum-Slider-label, & ._3e7nca_spectrum-Slider-value {
+      cursor: inherit;
+    }
+  }
 }
 
-._3e7nca_spectrum-Slider-controls:before {
-  inset-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
-}
+._3e7nca_spectrum-Slider-controls {
+  &:before, &:after {
+    content: "";
+    inline-size: calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2);
+    block-size: 100%;
+    display: block;
+    position: absolute;
+  }
 
-._3e7nca_spectrum-Slider-controls:after {
-  inset-inline-end: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
+  &:before {
+    inset-inline-start: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
+  }
+
+  &:after {
+    inset-inline-end: calc(calc(var(--spectrum-slider-handle-width, var(--spectrum-global-dimension-size-200)) / 2) * -1);
+  }
 }
 
 ._3e7nca_spectrum-Slider {
   --spectrum-slider-track-gradient: var(--spectrum-slider-track-color, var(--spectrum-global-color-gray-300));
 }
 
-._3e7nca_spectrum-Slider-track:before {
-  background: var(--spectrum-slider-track-gradient);
-  background-size: var(--spectrum-track-background-size);
-  background-position: var(--spectrum-track-background-position);
+._3e7nca_spectrum-Slider-track {
+  &:before {
+    background: var(--spectrum-slider-track-gradient);
+    background-size: var(--spectrum-track-background-size);
+    background-position: var(--spectrum-track-background-position);
+  }
 }
 
 ._3e7nca_spectrum-Slider-labelContainer {
   color: var(--spectrum-label-text-color, var(--spectrum-alias-label-text-color));
 }
 
-._3e7nca_spectrum-Slider--filled ._3e7nca_spectrum-Slider-track:first-child:before, ._3e7nca_spectrum-Slider-fill:before {
-  background: var(--spectrum-slider-fill-track-color, var(--spectrum-global-color-gray-700));
+._3e7nca_spectrum-Slider--filled {
+  & ._3e7nca_spectrum-Slider-track:first-child {
+    &:before {
+      background: var(--spectrum-slider-fill-track-color, var(--spectrum-global-color-gray-700));
+    }
+  }
+}
+
+._3e7nca_spectrum-Slider-fill {
+  &:before {
+    background: var(--spectrum-slider-fill-track-color, var(--spectrum-global-color-gray-700));
+  }
 }
 
-._3e7nca_spectrum-Slider-buffer:before, ._3e7nca_spectrum-Slider-buffer:after {
-  background: var(--spectrum-slider-player-track-buffer-color, var(--spectrum-global-color-gray-500));
+._3e7nca_spectrum-Slider-buffer {
+  &:before, &:after {
+    background: var(--spectrum-slider-player-track-buffer-color, var(--spectrum-global-color-gray-500));
+  }
 }
 
-._3e7nca_spectrum-Slider-ramp path {
-  fill: var(--spectrum-slider-track-color, var(--spectrum-global-color-gray-300));
+._3e7nca_spectrum-Slider-ramp {
+  & path {
+    fill: var(--spectrum-slider-track-color, var(--spectrum-global-color-gray-300));
+  }
 }
 
 ._3e7nca_spectrum-Slider-handle {
   border-color: var(--spectrum-slider-handle-border-color, var(--spectrum-global-color-gray-700));
   background: var(--spectrum-slider-handle-background-color, var(--spectrum-alias-background-color-transparent));
-}
 
-._3e7nca_spectrum-Slider-handle._3e7nca_is-hovered {
-  border-color: var(--spectrum-slider-handle-border-color-hover, var(--spectrum-global-color-gray-800));
-}
+  &._3e7nca_is-hovered {
+    border-color: var(--spectrum-slider-handle-border-color-hover, var(--spectrum-global-color-gray-800));
+  }
 
-._3e7nca_spectrum-Slider-handle._3e7nca_is-focused {
-  border-color: var(--spectrum-slider-handle-border-color-key-focus, var(--spectrum-global-color-gray-800));
-}
+  &._3e7nca_is-focused {
+    border-color: var(--spectrum-slider-handle-border-color-key-focus, var(--spectrum-global-color-gray-800));
 
-._3e7nca_spectrum-Slider-handle._3e7nca_is-focused:before {
-  box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25))
+    &:before {
+      box-shadow: 0 0 0 var(--spectrum-alias-focus-ring-size, var(--spectrum-global-dimension-static-size-25))
         var(--spectrum-alias-focus-color, var(--spectrum-global-color-blue-400));
-}
+    }
+  }
 
-._3e7nca_spectrum-Slider-handle:active, ._3e7nca_spectrum-Slider-handle._3e7nca_is-dragged {
-  border-color: var(--spectrum-slider-handle-border-color-down, var(--spectrum-global-color-gray-800));
+  &:active, &._3e7nca_is-dragged {
+    border-color: var(--spectrum-slider-handle-border-color-down, var(--spectrum-global-color-gray-800));
+  }
 }
 
-._3e7nca_spectrum-Slider--ramp ._3e7nca_spectrum-Slider-handle {
-  box-shadow: 0 0 0 4px var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
+._3e7nca_spectrum-Slider--ramp {
+  & ._3e7nca_spectrum-Slider-handle {
+    box-shadow: 0 0 0 4px var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
+  }
 }
 
 ._3e7nca_spectrum-Slider-input {
   background: none;
 }
 
-._3e7nca_spectrum-Slider-tick:after {
-  background-color: var(--spectrum-slider-tick-mark-color, var(--spectrum-alias-track-color-default));
+._3e7nca_spectrum-Slider-tick {
+  &:after {
+    background-color: var(--spectrum-slider-tick-mark-color, var(--spectrum-alias-track-color-default));
+  }
 }
 
-._3e7nca_spectrum-Slider-handle._3e7nca_is-dragged {
-  border-color: var(--spectrum-slider-handle-border-color-down, var(--spectrum-global-color-gray-800));
-  background: var(--spectrum-slider-handle-background-color-down, var(--spectrum-alias-background-color-transparent));
+._3e7nca_spectrum-Slider-handle {
+  &._3e7nca_is-dragged {
+    border-color: var(--spectrum-slider-handle-border-color-down, var(--spectrum-global-color-gray-800));
+    background: var(--spectrum-slider-handle-background-color-down, var(--spectrum-alias-background-color-transparent));
+  }
 }
 
-._3e7nca_spectrum-Slider--range ._3e7nca_spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before {
-  background: var(--spectrum-slider-fill-track-color, var(--spectrum-global-color-gray-700));
+._3e7nca_spectrum-Slider--range {
+  & ._3e7nca_spectrum-Slider-track {
+    &:not(:first-of-type):not(:last-of-type) {
+      &:before {
+        background: var(--spectrum-slider-fill-track-color, var(--spectrum-global-color-gray-700));
+      }
+    }
+  }
 }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-controls:before {
-  background-color: var(--spectrum-global-color-static-white, #fff);
-  background-image: linear-gradient(-45deg,
+._3e7nca_spectrum-Slider--color {
+  & ._3e7nca_spectrum-Slider-controls:before {
+    background-color: var(--spectrum-global-color-static-white, #fff);
+    background-image: linear-gradient(-45deg,
         transparent 75.5%,
         var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%),
       linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, #bcbcbc) 75.5%),
@@ -644,161 +713,206 @@
         var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%,
         transparent 25.5%),
       linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, #bcbcbc) 25.5%, transparent 25.5%);
-  background-size: var(--spectrum-global-dimension-static-size-200, 16px)
+    background-size: var(--spectrum-global-dimension-static-size-200, 16px)
       var(--spectrum-global-dimension-static-size-200, 16px);
-  background-position: 0 0,
+    background-position: 0 0,
       0 var(--spectrum-global-dimension-static-size-100, 8px),
       var(--spectrum-global-dimension-static-size-100, 8px)
         calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)),
       calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0;
-  z-index: 0;
-}
+    z-index: 0;
+  }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-track {
-  background-color: #0000;
-  background-image: linear-gradient(to right,
+  & ._3e7nca_spectrum-Slider-track {
+    background-color: #0000;
+    background-image: linear-gradient(to right,
       var(--spectrum-slider-color-track-background-color-gradient-start, var(--spectrum-global-color-blue-400)),
       var(--spectrum-slider-color-track-background-color-gradient-end, var(--spectrum-global-color-blue-700)));
-  box-shadow: inset 0 0 0 1px var(--spectrum-slider-color-track-border-color, var(--spectrum-alias-border-color-translucent-dark));
-}
+    box-shadow: inset 0 0 0 1px var(--spectrum-slider-color-track-border-color, var(--spectrum-alias-border-color-translucent-dark));
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-track:before {
-  display: none;
-}
+    &:before {
+      display: none;
+    }
+  }
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle {
-  box-shadow: inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color, var(--spectrum-alias-border-color-translucent-dark)),
+  & ._3e7nca_spectrum-Slider-handle {
+    box-shadow: inset 0 0 0 1px var(--spectrum-slider-color-handle-inset-border-color, var(--spectrum-alias-border-color-translucent-dark)),
       0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color, var(--spectrum-alias-border-color-translucent-dark));
-  border-color: var(--spectrum-slider-color-handle-border-color, var(--spectrum-global-color-gray-50));
-  background: var(--spectrum-slider-color-handle-color, var(--spectrum-alias-border-color-transparent));
-}
+    border-color: var(--spectrum-slider-color-handle-border-color, var(--spectrum-global-color-gray-50));
+    background: var(--spectrum-slider-color-handle-color, var(--spectrum-alias-border-color-transparent));
 
-._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle._3e7nca_is-focused {
-  box-shadow: 0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus, var(--spectrum-alias-border-color-translucent-dark));
+    &._3e7nca_is-focused {
+      box-shadow: 0 0 0 1px var(--spectrum-slider-color-handle-outset-border-color-key-focus, var(--spectrum-alias-border-color-translucent-dark));
+    }
+  }
 }
 
 ._3e7nca_spectrum-Dial-handle {
   box-shadow: none;
-}
-
-._3e7nca_spectrum-Dial-handle:before {
-  display: none;
-}
-
-._3e7nca_spectrum-Dial-handle:after {
-  background-color: var(--spectrum-dial-handle-marker-color, var(--spectrum-global-color-gray-700));
-}
-
-._3e7nca_spectrum-Dial-handle._3e7nca_is-hovered:after {
-  background-color: var(--spectrum-dial-handle-marker-color-hover, var(--spectrum-global-color-gray-800));
-}
-
-._3e7nca_spectrum-Dial-handle._3e7nca_is-focused {
-  background-color: var(--spectrum-slider-handle-background-color-key-focus, var(--spectrum-alias-background-color-transparent));
-  border-color: var(--spectrum-slider-handle-border-color-key-focus, var(--spectrum-global-color-gray-800));
-}
-
-._3e7nca_spectrum-Dial-handle._3e7nca_is-focused:after {
-  background-color: var(--spectrum-dial-handle-marker-color-key-focus, var(--spectrum-global-color-gray-50));
-}
-
-._3e7nca_spectrum-Dial-handle:active, ._3e7nca_spectrum-Dial-handle._3e7nca_is-dragged {
-  background-color: var(--spectrum-dial-border-color-hover, var(--spectrum-global-color-gray-800));
-  border-color: var(--spectrum-slider-handle-border-color-down, var(--spectrum-global-color-gray-800));
-}
-
-:is(._3e7nca_spectrum-Dial-handle:active, ._3e7nca_spectrum-Dial-handle._3e7nca_is-dragged):after {
-  background-color: var(--spectrum-dial-handle-marker-color-key-focus, var(--spectrum-global-color-gray-50));
-}
-
-._3e7nca_spectrum-Dial-controls:before, ._3e7nca_spectrum-Dial-controls:after {
-  background-color: var(--spectrum-dial-min-max-tick-color, var(--spectrum-global-color-gray-600));
-}
-
-._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-labelContainer {
-  color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
-}
-
-._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-controls:after, ._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-controls:before {
-  background-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
-}
-
-._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-handle {
-  border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
-  background: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
-}
-
-._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-handle._3e7nca_is-hovered, ._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-handle:active {
-  border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
-  background: var(--spectrum-slider-handle-background-color, var(--spectrum-alias-background-color-transparent));
-}
 
-._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-handle:after, ._3e7nca_spectrum-Dial._3e7nca_is-disabled ._3e7nca_spectrum-Dial-handle:before {
-  background-color: var(--spectrum-slider-track-color-disabled, var(--spectrum-global-color-gray-300));
-}
-
-._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-labelContainer {
-  color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
-}
+  &:before {
+    display: none;
+  }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-handle {
-  border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
-  background: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
-}
+  &:after {
+    background-color: var(--spectrum-dial-handle-marker-color, var(--spectrum-global-color-gray-700));
+  }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-handle._3e7nca_is-hovered, ._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-handle:active {
-  border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
-  background: var(--spectrum-slider-handle-background-color, var(--spectrum-alias-background-color-transparent));
-}
+  &._3e7nca_is-hovered {
+    &:after {
+      background-color: var(--spectrum-dial-handle-marker-color-hover, var(--spectrum-global-color-gray-800));
+    }
+  }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-track:before {
-  background: var(--spectrum-slider-track-color-disabled, var(--spectrum-global-color-gray-300));
-}
+  &._3e7nca_is-focused {
+    background-color: var(--spectrum-slider-handle-background-color-key-focus, var(--spectrum-alias-background-color-transparent));
+    border-color: var(--spectrum-slider-handle-border-color-key-focus, var(--spectrum-global-color-gray-800));
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled._3e7nca_spectrum-Slider--filled ._3e7nca_spectrum-Slider-track:first-child:before, ._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-fill:before {
-  background: var(--spectrum-slider-fill-track-color-disabled, var(--spectrum-global-color-gray-300));
-}
+    &:after {
+      background-color: var(--spectrum-dial-handle-marker-color-key-focus, var(--spectrum-global-color-gray-50));
+    }
+  }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-buffer:before {
-  background: var(--spectrum-slider-player-track-buffer-color-disabled, var(--spectrum-alias-track-color-default));
-}
+  &:active, &._3e7nca_is-dragged {
+    background-color: var(--spectrum-dial-border-color-hover, var(--spectrum-global-color-gray-800));
+    border-color: var(--spectrum-slider-handle-border-color-down, var(--spectrum-global-color-gray-800));
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled ._3e7nca_spectrum-Slider-ramp path {
-  fill: var(--spectrum-slider-ramp-track-color-disabled, var(--spectrum-global-color-gray-200));
+    &:after {
+      background-color: var(--spectrum-dial-handle-marker-color-key-focus, var(--spectrum-global-color-gray-50));
+    }
+  }
 }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-track {
-  box-shadow: none;
-  background: var(--spectrum-slider-color-track-color-disabled, var(--spectrum-global-color-gray-200)) !important;
+._3e7nca_spectrum-Dial-controls {
+  &:before, &:after {
+    background-color: var(--spectrum-dial-min-max-tick-color, var(--spectrum-global-color-gray-600));
+  }
 }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle, ._3e7nca_spectrum-Slider._3e7nca_is-disabled._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle._3e7nca_is-hovered, ._3e7nca_spectrum-Slider._3e7nca_is-disabled._3e7nca_spectrum-Slider--color ._3e7nca_spectrum-Slider-handle:active {
-  background: var(--spectrum-slider-color-handle-color-disabled, var(--spectrum-alias-border-color-transparent));
-  box-shadow: none;
-  border-color: var(--spectrum-slider-color-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+._3e7nca_spectrum-Dial {
+  &._3e7nca_is-disabled {
+    & ._3e7nca_spectrum-Dial-labelContainer {
+      color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+    }
+
+    & ._3e7nca_spectrum-Dial-controls {
+      &:after, &:before {
+        background-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+      }
+    }
+
+    & ._3e7nca_spectrum-Dial-handle {
+      border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+      background: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
+
+      &._3e7nca_is-hovered, &:active {
+        border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+        background: var(--spectrum-slider-handle-background-color, var(--spectrum-alias-background-color-transparent));
+      }
+
+      &:after, &:before {
+        background-color: var(--spectrum-slider-track-color-disabled, var(--spectrum-global-color-gray-300));
+      }
+    }
+  }
 }
 
-._3e7nca_spectrum-Slider._3e7nca_is-disabled._3e7nca_spectrum-Slider--range ._3e7nca_spectrum-Slider-track:not(:first-of-type):not(:last-of-type):before {
-  background: var(--spectrum-slider-fill-track-color-disabled, var(--spectrum-global-color-gray-300));
+._3e7nca_spectrum-Slider {
+  &._3e7nca_is-disabled {
+    & ._3e7nca_spectrum-Slider-labelContainer {
+      color: var(--spectrum-label-text-color-disabled, var(--spectrum-alias-text-color-disabled));
+    }
+
+    & ._3e7nca_spectrum-Slider-handle {
+      border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+      background: var(--spectrum-alias-background-color-default, var(--spectrum-global-color-gray-100));
+
+      &._3e7nca_is-hovered, &:active {
+        border-color: var(--spectrum-slider-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+        background: var(--spectrum-slider-handle-background-color, var(--spectrum-alias-background-color-transparent));
+      }
+    }
+
+    & ._3e7nca_spectrum-Slider-track {
+      &:before {
+        background: var(--spectrum-slider-track-color-disabled, var(--spectrum-global-color-gray-300));
+      }
+    }
+
+    &._3e7nca_spectrum-Slider--filled {
+      & ._3e7nca_spectrum-Slider-track:first-child {
+        &:before {
+          background: var(--spectrum-slider-fill-track-color-disabled, var(--spectrum-global-color-gray-300));
+        }
+      }
+    }
+
+    & ._3e7nca_spectrum-Slider-fill {
+      &:before {
+        background: var(--spectrum-slider-fill-track-color-disabled, var(--spectrum-global-color-gray-300));
+      }
+    }
+
+    & ._3e7nca_spectrum-Slider-buffer {
+      &:before {
+        background: var(--spectrum-slider-player-track-buffer-color-disabled, var(--spectrum-alias-track-color-default));
+      }
+    }
+
+    & ._3e7nca_spectrum-Slider-ramp {
+      & path {
+        fill: var(--spectrum-slider-ramp-track-color-disabled, var(--spectrum-global-color-gray-200));
+      }
+    }
+
+    &._3e7nca_spectrum-Slider--color {
+      & ._3e7nca_spectrum-Slider-track {
+        box-shadow: none;
+        background: var(--spectrum-slider-color-track-color-disabled, var(--spectrum-global-color-gray-200)) !important;
+      }
+
+      & ._3e7nca_spectrum-Slider-handle {
+        background: var(--spectrum-slider-color-handle-color-disabled, var(--spectrum-alias-border-color-transparent));
+        box-shadow: none;
+        border-color: var(--spectrum-slider-color-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+
+        &._3e7nca_is-hovered, &:active {
+          background: var(--spectrum-slider-color-handle-color-disabled, var(--spectrum-alias-border-color-transparent));
+          box-shadow: none;
+          border-color: var(--spectrum-slider-color-handle-border-color-disabled, var(--spectrum-global-color-gray-400));
+        }
+      }
+    }
+
+    &._3e7nca_spectrum-Slider--range {
+      & ._3e7nca_spectrum-Slider-track {
+        &:not(:first-of-type):not(:last-of-type) {
+          &:before {
+            background: var(--spectrum-slider-fill-track-color-disabled, var(--spectrum-global-color-gray-300));
+          }
+        }
+      }
+    }
+  }
 }
 
 ._3e7nca_spectrum-Slider--label-side {
   align-items: center;
   gap: 7px;
   display: flex;
-}
 
-._3e7nca_spectrum-Slider--label-side > * {
-  display: inline-block;
-}
+  & > * {
+    display: inline-block;
+  }
 
-._3e7nca_spectrum-Slider--label-side ._3e7nca_spectrum-Slider-labelContainer {
-  flex-shrink: 0;
-  padding-top: 0;
-}
+  & ._3e7nca_spectrum-Slider-labelContainer {
+    flex-shrink: 0;
+    padding-top: 0;
+  }
 
-._3e7nca_spectrum-Slider--label-side ._3e7nca_spectrum-Slider-label {
-  margin-inline-end: var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200));
+  & ._3e7nca_spectrum-Slider-label {
+    margin-inline-end: var(--spectrum-slider-label-gap-x, var(--spectrum-global-dimension-size-200));
+  }
 }
 
 @media (forced-colors: active) {