@sc-360-v2/storefront-cms-library 0.5.59 → 0.5.60

package/dist/language-selector.scss

@@ -13,46 +13,39 @@
 // section — Widget Style absorbed it, so the fallback exists only for pages saved
 // before the merge. Same shape the divider already uses for its
 // hover-falls-back-to-default chain below.
-$widgetFontProps:
-  ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt-tm, wd-wp, wd-bk, pg;
+$widgetFontProps: ft-fy, ft-se, cr, ft-wt, ft-se-ic, ue, tt-an, lr-sg, le-ht, tt-tm, wd-wp, wd-bk,
+  pg;
 
 @mixin widgetStateFont($state, $fallbackState: null) {
   @each $p in $widgetFontProps {
-    $inner: if(
-      $fallbackState == null,
-      var(--_ctm-dn-wt-se-#{$state}-#{$p}),
-      var(
-        --_ctm-dn-wt-se-#{$state}-#{$p},
-        var(
-          --_ctm-mob-dn-wt-se-#{$fallbackState}-#{$p},
-          var(
-            --_ctm-tab-dn-wt-se-#{$fallbackState}-#{$p},
-            var(--_ctm-dn-wt-se-#{$fallbackState}-#{$p})
-          )
-        )
-      )
-    );
-    --_sf-wt-#{$p}: var(
-      --_ctm-mob-dn-wt-se-#{$state}-#{$p},
-      var(--_ctm-tab-dn-wt-se-#{$state}-#{$p}, #{$inner})
-    );
+    $inner: if($fallbackState ==null,
+        var(--_ctm-dn-wt-se-#{$state}-#{$p}),
+        var(--_ctm-dn-wt-se-#{$state}-#{$p},
+          var(--_ctm-mob-dn-wt-se-#{$fallbackState}-#{$p},
+            var(--_ctm-tab-dn-wt-se-#{$fallbackState}-#{$p},
+              var(--_ctm-dn-wt-se-#{$fallbackState}-#{$p})))));
+    --_sf-wt-#{$p}: var(--_ctm-mob-dn-wt-se-#{$state}-#{$p},
+      var(--_ctm-tab-dn-wt-se-#{$state}-#{$p}, #{$inner}));
   }
 }
 
 [data-div-type="element"] {
+
   &[data-element-type="languageMenu"],
   &[data-element-type="currencySelector"],
   &[data-element-type="userGroupsSelector"],
   &[data-element-type="warehouseSelector"] {
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
 
-    & > .wrapper {
+    &>.wrapper {
       width: 100%;
       height: auto;
     }
+
     &[data-show-shadow="false"] {
       --_show-shadow: none;
     }
+
     .language__conatiner {
       // background-color: var(
       //   --_ctm-mob-dn-wt-se-dt-se-bd-cr,
@@ -163,30 +156,35 @@ $widgetFontProps:
           border-style: none;
         }
       }
+
       &[data-widget-hover-border="false"] {
         .est__dropdown__main .est__dropdown .dropdown__button__wrapper:hover {
           border-width: 0;
           border-style: none;
         }
       }
+
       &[data-dropdown-border="false"] {
         .est__dropdown__main .est__dropdown .list {
           border-width: 0;
           border-style: none;
         }
       }
+
       &[data-item-border="false"] {
         .option:not(:hover):not([data-selected="true"]) {
           border-width: 0;
           border-style: none;
         }
       }
+
       &[data-item-hover-border="false"] {
         .option:hover:not([data-selected="true"]) {
           border-width: 0;
           border-style: none;
         }
       }
+
       &[data-item-selected-border="false"] {
         .option[data-selected="true"] {
           border-width: 0;
@@ -195,199 +193,111 @@ $widgetFontProps:
       }
 
       .option:hover {
-        --_sf-hr-bd-cr: var(
-          --_ctm-mob-dn-im-se-hr-se-bd-cr,
-          var(--_ctm-tab-dn-im-se-hr-se-bd-cr, var(--_ctm-dn-im-se-hr-se-bd-cr))
-        );
-        --_sf-hr-br-cr: var(
-          --_ctm-mob-dn-im-se-hr-se-br-cr,
-          var(--_ctm-tab-dn-im-se-hr-se-br-cr, var(--_ctm-dn-im-se-hr-se-br-cr))
-        );
-        --_sf-hr-br-se: var(
-          --_ctm-mob-dn-im-se-hr-se-br-se,
-          var(--_ctm-tab-dn-im-se-hr-se-br-se, var(--_ctm-dn-im-se-hr-se-br-se))
-        );
-        --_sf-hr-br-wh: var(
-          --_ctm-mob-dn-im-se-hr-se-br-wh,
-          var(--_ctm-tab-dn-im-se-hr-se-br-wh, var(--_ctm-dn-im-se-hr-se-br-wh))
-        );
-        --_sf-hr-br-rs: var(
-          --_ctm-mob-dn-im-se-hr-se-br-rs,
-          var(--_ctm-tab-dn-im-se-hr-se-br-rs, var(--_ctm-dn-im-se-hr-se-br-rs))
-        );
+        --_sf-hr-bd-cr: var(--_ctm-mob-dn-im-se-hr-se-bd-cr,
+            var(--_ctm-tab-dn-im-se-hr-se-bd-cr, var(--_ctm-dn-im-se-hr-se-bd-cr)));
+        --_sf-hr-br-cr: var(--_ctm-mob-dn-im-se-hr-se-br-cr,
+            var(--_ctm-tab-dn-im-se-hr-se-br-cr, var(--_ctm-dn-im-se-hr-se-br-cr)));
+        --_sf-hr-br-se: var(--_ctm-mob-dn-im-se-hr-se-br-se,
+            var(--_ctm-tab-dn-im-se-hr-se-br-se, var(--_ctm-dn-im-se-hr-se-br-se)));
+        --_sf-hr-br-wh: var(--_ctm-mob-dn-im-se-hr-se-br-wh,
+            var(--_ctm-tab-dn-im-se-hr-se-br-wh, var(--_ctm-dn-im-se-hr-se-br-wh)));
+        --_sf-hr-br-rs: var(--_ctm-mob-dn-im-se-hr-se-br-rs,
+            var(--_ctm-tab-dn-im-se-hr-se-br-rs, var(--_ctm-dn-im-se-hr-se-br-rs)));
 
         // for shadow
-        --_sf-hr-sw-ae: var(
-          --_ctm-mob-dn-im-se-hr-se-sw-ae,
-          var(--_ctm-tab-dn-im-se-hr-se-sw-ae, var(--_ctm-dn-im-se-hr-se-sw-ae))
-        );
-        --_sf-hr-sw-br: var(
-          --_ctm-mob-dn-im-se-hr-se-sw-br,
-          var(--_ctm-tab-dn-im-se-hr-se-sw-br, var(--_ctm-dn-im-se-hr-se-sw-br))
-        );
-        --_sf-hr-sw-hr: var(
-          --_ctm-mob-dn-im-se-hr-se-sw-hr,
-          var(--_ctm-tab-dn-im-se-hr-se-sw-hr, var(--_ctm-dn-im-se-hr-se-sw-hr))
-        );
-        --_sf-hr-sw-cr: var(
-          --_ctm-mob-dn-im-se-hr-se-sw-cr,
-          var(--_ctm-tab-dn-im-se-hr-se-sw-cr, var(--_ctm-dn-im-se-hr-se-sw-cr))
-        );
+        --_sf-hr-sw-ae: var(--_ctm-mob-dn-im-se-hr-se-sw-ae,
+            var(--_ctm-tab-dn-im-se-hr-se-sw-ae, var(--_ctm-dn-im-se-hr-se-sw-ae)));
+        --_sf-hr-sw-br: var(--_ctm-mob-dn-im-se-hr-se-sw-br,
+            var(--_ctm-tab-dn-im-se-hr-se-sw-br, var(--_ctm-dn-im-se-hr-se-sw-br)));
+        --_sf-hr-sw-hr: var(--_ctm-mob-dn-im-se-hr-se-sw-hr,
+            var(--_ctm-tab-dn-im-se-hr-se-sw-hr, var(--_ctm-dn-im-se-hr-se-sw-hr)));
+        --_sf-hr-sw-cr: var(--_ctm-mob-dn-im-se-hr-se-sw-cr,
+            var(--_ctm-tab-dn-im-se-hr-se-sw-cr, var(--_ctm-dn-im-se-hr-se-sw-cr)));
 
         // for font
 
-        --_sf-hr-cr: var(
-          --_ctm-mob-dn-im-se-hr-se-cr,
-          var(--_ctm-tab-dn-im-se-hr-se-cr, var(--_ctm-dn-im-se-hr-se-cr))
-        );
-        --_sf-hr-ft-fy: var(
-          --_ctm-mob-dn-im-se-hr-se-ft-fy,
-          var(--_ctm-tab-dn-im-se-hr-se-ft-fy, var(--_ctm-dn-im-se-hr-se-ft-fy))
-        );
-        --_sf-hr-ft-se: var(
-          --_ctm-mob-dn-im-se-hr-se-ft-se,
-          var(--_ctm-tab-dn-im-se-hr-se-ft-se, var(--_ctm-dn-im-se-hr-se-ft-se))
-        );
-        --_sf-hr-ft-wt: var(
-          --_ctm-mob-dn-im-se-hr-se-ft-wt,
-          var(--_ctm-tab-dn-im-se-hr-se-ft-wt, var(--_ctm-dn-im-se-hr-se-ft-wt))
-        );
-        --_sf-hr-ft-se-ic: var(
-          --_ctm-mob-dn-im-se-hr-se-ft-se-ic,
-          var(--_ctm-tab-dn-im-se-hr-se-ft-se-ic, var(--_ctm-dn-im-se-hr-se-ft-se-ic))
-        );
-        --_sf-hr-tt-an: var(
-          --_ctm-mob-dn-im-se-hr-se-tt-an,
-          var(--_ctm-tab-dn-im-se-hr-se-tt-an, var(--_ctm-dn-im-se-hr-se-tt-an))
-        );
-        --_sf-hr-lr-sg: var(
-          --_ctm-mob-dn-im-se-hr-se-lr-sg,
-          var(--_ctm-tab-dn-im-se-hr-se-lr-sg, var(--_ctm-dn-im-se-hr-se-lr-sg))
-        );
-        --_sf-hr-le-ht: var(
-          --_ctm-mob-dn-im-se-hr-se-le-ht,
-          var(--_ctm-tab-dn-im-se-hr-se-le-ht, var(--_ctm-dn-im-se-hr-se-le-ht))
-        );
-
-        --_sf-hr-ue: var(
-          --_ctm-mob-dn-im-se-hr-se-ue,
-          var(--_ctm-tab-dn-im-se-hr-se-ue, var(--_ctm-dn-im-se-hr-se-ue))
-        );
-        --_sf-hr-tt-tm: var(
-          --_ctm-mob-dn-im-se-hr-se-tt-tm,
-          var(--_ctm-tab-dn-im-se-hr-se-tt-tm, var(--_ctm-dn-im-se-hr-se-tt-tm))
-        );
-        --_sf-hr-wd-wp: var(
-          --_ctm-mob-dn-im-se-hr-se-wd-wp,
-          var(--_ctm-tab-dn-im-se-hr-se-wd-wp, var(--_ctm-dn-im-se-hr-se-wd-wp))
-        );
-        --_sf-hr-wd-bk: var(
-          --_ctm-mob-dn-im-se-hr-se-wd-bk,
-          var(--_ctm-tab-dn-im-se-hr-se-wd-bk, var(--_ctm-dn-im-se-hr-se-wd-bk))
-        );
-        --_sf-hr-pg: var(
-          --_ctm-mob-dn-im-se-hr-se-pg,
-          var(--_ctm-tab-dn-im-se-hr-se-pg, var(--_ctm-dn-im-se-hr-se-pg))
-        );
+        --_sf-hr-cr: var(--_ctm-mob-dn-im-se-hr-se-cr,
+            var(--_ctm-tab-dn-im-se-hr-se-cr, var(--_ctm-dn-im-se-hr-se-cr)));
+        --_sf-hr-ft-fy: var(--_ctm-mob-dn-im-se-hr-se-ft-fy,
+            var(--_ctm-tab-dn-im-se-hr-se-ft-fy, var(--_ctm-dn-im-se-hr-se-ft-fy)));
+        --_sf-hr-ft-se: var(--_ctm-mob-dn-im-se-hr-se-ft-se,
+            var(--_ctm-tab-dn-im-se-hr-se-ft-se, var(--_ctm-dn-im-se-hr-se-ft-se)));
+        --_sf-hr-ft-wt: var(--_ctm-mob-dn-im-se-hr-se-ft-wt,
+            var(--_ctm-tab-dn-im-se-hr-se-ft-wt, var(--_ctm-dn-im-se-hr-se-ft-wt)));
+        --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-im-se-hr-se-ft-se-ic,
+            var(--_ctm-tab-dn-im-se-hr-se-ft-se-ic, var(--_ctm-dn-im-se-hr-se-ft-se-ic)));
+        --_sf-hr-tt-an: var(--_ctm-mob-dn-im-se-hr-se-tt-an,
+            var(--_ctm-tab-dn-im-se-hr-se-tt-an, var(--_ctm-dn-im-se-hr-se-tt-an)));
+        --_sf-hr-lr-sg: var(--_ctm-mob-dn-im-se-hr-se-lr-sg,
+            var(--_ctm-tab-dn-im-se-hr-se-lr-sg, var(--_ctm-dn-im-se-hr-se-lr-sg)));
+        --_sf-hr-le-ht: var(--_ctm-mob-dn-im-se-hr-se-le-ht,
+            var(--_ctm-tab-dn-im-se-hr-se-le-ht, var(--_ctm-dn-im-se-hr-se-le-ht)));
+
+        --_sf-hr-ue: var(--_ctm-mob-dn-im-se-hr-se-ue,
+            var(--_ctm-tab-dn-im-se-hr-se-ue, var(--_ctm-dn-im-se-hr-se-ue)));
+        --_sf-hr-tt-tm: var(--_ctm-mob-dn-im-se-hr-se-tt-tm,
+            var(--_ctm-tab-dn-im-se-hr-se-tt-tm, var(--_ctm-dn-im-se-hr-se-tt-tm)));
+        --_sf-hr-wd-wp: var(--_ctm-mob-dn-im-se-hr-se-wd-wp,
+            var(--_ctm-tab-dn-im-se-hr-se-wd-wp, var(--_ctm-dn-im-se-hr-se-wd-wp)));
+        --_sf-hr-wd-bk: var(--_ctm-mob-dn-im-se-hr-se-wd-bk,
+            var(--_ctm-tab-dn-im-se-hr-se-wd-bk, var(--_ctm-dn-im-se-hr-se-wd-bk)));
+        --_sf-hr-pg: var(--_ctm-mob-dn-im-se-hr-se-pg,
+            var(--_ctm-tab-dn-im-se-hr-se-pg, var(--_ctm-dn-im-se-hr-se-pg)));
       }
 
       .option[data-selected="true"] {
-        --_sf-sd-bd-cr: var(
-          --_ctm-mob-dn-im-se-sd-se-bd-cr,
-          var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr))
-        );
-        --_sf-sd-br-cr: var(
-          --_ctm-mob-dn-im-se-sd-se-br-cr,
-          var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr))
-        );
-        --_sf-sd-br-se: var(
-          --_ctm-mob-dn-im-se-sd-se-br-se,
-          var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se))
-        );
-        --_sf-sd-br-wh: var(
-          --_ctm-mob-dn-im-se-sd-se-br-wh,
-          var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh))
-        );
+        --_sf-sd-bd-cr: var(--_ctm-mob-dn-im-se-sd-se-bd-cr,
+            var(--_ctm-tab-dn-im-se-sd-se-bd-cr, var(--_ctm-dn-im-se-sd-se-bd-cr)));
+        --_sf-sd-br-cr: var(--_ctm-mob-dn-im-se-sd-se-br-cr,
+            var(--_ctm-tab-dn-im-se-sd-se-br-cr, var(--_ctm-dn-im-se-sd-se-br-cr)));
+        --_sf-sd-br-se: var(--_ctm-mob-dn-im-se-sd-se-br-se,
+            var(--_ctm-tab-dn-im-se-sd-se-br-se, var(--_ctm-dn-im-se-sd-se-br-se)));
+        --_sf-sd-br-wh: var(--_ctm-mob-dn-im-se-sd-se-br-wh,
+            var(--_ctm-tab-dn-im-se-sd-se-br-wh, var(--_ctm-dn-im-se-sd-se-br-wh)));
         // Was missing entirely, so `border-radius: var(--_sf-sd-br-rs, <default state>)`
         // always fell through to the default state and Selected > Border Radius did
         // nothing. Every sibling state variable had one; this is the odd one out.
-        --_sf-sd-br-rs: var(
-          --_ctm-mob-dn-im-se-sd-se-br-rs,
-          var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs))
-        );
+        --_sf-sd-br-rs: var(--_ctm-mob-dn-im-se-sd-se-br-rs,
+            var(--_ctm-tab-dn-im-se-sd-se-br-rs, var(--_ctm-dn-im-se-sd-se-br-rs)));
         // new
-        --_sf-sd-sw-ae: var(
-          --_ctm-mob-dn-im-se-sd-se-sw-ae,
-          var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae))
-        );
-        --_sf-sd-sw-br: var(
-          --_ctm-mob-dn-im-se-sd-se-sw-br,
-          var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br))
-        );
-        --_sf-sd-sw-sd: var(
-          --_ctm-mob-dn-im-se-sd-se-sw-sd,
-          var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd))
-        );
-        --_sf-sd-sw-cr: var(
-          --_ctm-mob-dn-im-se-sd-se-sw-cr,
-          var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr))
-        );
+        --_sf-sd-sw-ae: var(--_ctm-mob-dn-im-se-sd-se-sw-ae,
+            var(--_ctm-tab-dn-im-se-sd-se-sw-ae, var(--_ctm-dn-im-se-sd-se-sw-ae)));
+        --_sf-sd-sw-br: var(--_ctm-mob-dn-im-se-sd-se-sw-br,
+            var(--_ctm-tab-dn-im-se-sd-se-sw-br, var(--_ctm-dn-im-se-sd-se-sw-br)));
+        --_sf-sd-sw-sd: var(--_ctm-mob-dn-im-se-sd-se-sw-sd,
+            var(--_ctm-tab-dn-im-se-sd-se-sw-sd, var(--_ctm-dn-im-se-sd-se-sw-sd)));
+        --_sf-sd-sw-cr: var(--_ctm-mob-dn-im-se-sd-se-sw-cr,
+            var(--_ctm-tab-dn-im-se-sd-se-sw-cr, var(--_ctm-dn-im-se-sd-se-sw-cr)));
 
         // for font
 
-        --_sf-sd-cr: var(
-          --_ctm-mob-dn-im-se-sd-se-cr,
-          var(--_ctm-tab-dn-im-se-sd-se-cr, var(--_ctm-dn-im-se-sd-se-cr))
-        );
-        --_sf-sd-ft-fy: var(
-          --_ctm-mob-dn-im-se-sd-se-ft-fy,
-          var(--_ctm-tab-dn-im-se-sd-se-ft-fy, var(--_ctm-dn-im-se-sd-se-ft-fy))
-        );
-        --_sf-sd-ft-se: var(
-          --_ctm-mob-dn-im-se-sd-se-ft-se,
-          var(--_ctm-tab-dn-im-se-sd-se-ft-se, var(--_ctm-dn-im-se-sd-se-ft-se))
-        );
-        --_sf-sd-ft-wt: var(
-          --_ctm-mob-dn-im-se-sd-se-ft-wt,
-          var(--_ctm-tab-dn-im-se-sd-se-ft-wt, var(--_ctm-dn-im-se-sd-se-ft-wt))
-        );
-        --_sf-sd-ft-se-ic: var(
-          --_ctm-mob-dn-im-se-sd-se-ft-se-ic,
-          var(--_ctm-tab-dn-im-se-sd-se-ft-se-ic, var(--_ctm-dn-im-se-sd-se-ft-se-ic))
-        );
-        --_sf-sd-tt-an: var(
-          --_ctm-mob-dn-im-se-sd-se-tt-an,
-          var(--_ctm-tab-dn-im-se-sd-se-tt-an, var(--_ctm-dn-im-se-sd-se-tt-an))
-        );
-        --_sf-sd-lr-sg: var(
-          --_ctm-mob-dn-im-se-sd-se-lr-sg,
-          var(--_ctm-tab-dn-im-se-sd-se-lr-sg, var(--_ctm-dn-im-se-sd-se-lr-sg))
-        );
-        --_sf-sd-le-ht: var(
-          --_ctm-mob-dn-im-se-sd-se-le-ht,
-          var(--_ctm-tab-dn-im-se-sd-se-le-ht, var(--_ctm-dn-im-se-sd-se-le-ht))
-        );
-
-        --_sf-sd-ue: var(
-          --_ctm-mob-dn-im-se-sd-se-ue,
-          var(--_ctm-tab-dn-im-se-sd-se-ue, var(--_ctm-dn-im-se-sd-se-ue))
-        );
-        --_sf-sd-tt-tm: var(
-          --_ctm-mob-dn-im-se-sd-se-tt-tm,
-          var(--_ctm-tab-dn-im-se-sd-se-tt-tm, var(--_ctm-dn-im-se-sd-se-tt-tm))
-        );
-        --_sf-sd-wd-wp: var(
-          --_ctm-mob-dn-im-se-sd-se-wd-wp,
-          var(--_ctm-tab-dn-im-se-sd-se-wd-wp, var(--_ctm-dn-im-se-sd-se-wd-wp))
-        );
-        --_sf-sd-wd-bk: var(
-          --_ctm-mob-dn-im-se-sd-se-wd-bk,
-          var(--_ctm-tab-dn-im-se-sd-se-wd-bk, var(--_ctm-dn-im-se-sd-se-wd-bk))
-        );
-        --_sf-sd-pg: var(
-          --_ctm-mob-dn-im-se-sd-se-pg,
-          var(--_ctm-tab-dn-im-se-sd-se-pg, var(--_ctm-dn-im-se-sd-se-pg))
-        );
+        --_sf-sd-cr: var(--_ctm-mob-dn-im-se-sd-se-cr,
+            var(--_ctm-tab-dn-im-se-sd-se-cr, var(--_ctm-dn-im-se-sd-se-cr)));
+        --_sf-sd-ft-fy: var(--_ctm-mob-dn-im-se-sd-se-ft-fy,
+            var(--_ctm-tab-dn-im-se-sd-se-ft-fy, var(--_ctm-dn-im-se-sd-se-ft-fy)));
+        --_sf-sd-ft-se: var(--_ctm-mob-dn-im-se-sd-se-ft-se,
+            var(--_ctm-tab-dn-im-se-sd-se-ft-se, var(--_ctm-dn-im-se-sd-se-ft-se)));
+        --_sf-sd-ft-wt: var(--_ctm-mob-dn-im-se-sd-se-ft-wt,
+            var(--_ctm-tab-dn-im-se-sd-se-ft-wt, var(--_ctm-dn-im-se-sd-se-ft-wt)));
+        --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-im-se-sd-se-ft-se-ic,
+            var(--_ctm-tab-dn-im-se-sd-se-ft-se-ic, var(--_ctm-dn-im-se-sd-se-ft-se-ic)));
+        --_sf-sd-tt-an: var(--_ctm-mob-dn-im-se-sd-se-tt-an,
+            var(--_ctm-tab-dn-im-se-sd-se-tt-an, var(--_ctm-dn-im-se-sd-se-tt-an)));
+        --_sf-sd-lr-sg: var(--_ctm-mob-dn-im-se-sd-se-lr-sg,
+            var(--_ctm-tab-dn-im-se-sd-se-lr-sg, var(--_ctm-dn-im-se-sd-se-lr-sg)));
+        --_sf-sd-le-ht: var(--_ctm-mob-dn-im-se-sd-se-le-ht,
+            var(--_ctm-tab-dn-im-se-sd-se-le-ht, var(--_ctm-dn-im-se-sd-se-le-ht)));
+
+        --_sf-sd-ue: var(--_ctm-mob-dn-im-se-sd-se-ue,
+            var(--_ctm-tab-dn-im-se-sd-se-ue, var(--_ctm-dn-im-se-sd-se-ue)));
+        --_sf-sd-tt-tm: var(--_ctm-mob-dn-im-se-sd-se-tt-tm,
+            var(--_ctm-tab-dn-im-se-sd-se-tt-tm, var(--_ctm-dn-im-se-sd-se-tt-tm)));
+        --_sf-sd-wd-wp: var(--_ctm-mob-dn-im-se-sd-se-wd-wp,
+            var(--_ctm-tab-dn-im-se-sd-se-wd-wp, var(--_ctm-dn-im-se-sd-se-wd-wp)));
+        --_sf-sd-wd-bk: var(--_ctm-mob-dn-im-se-sd-se-wd-bk,
+            var(--_ctm-tab-dn-im-se-sd-se-wd-bk, var(--_ctm-dn-im-se-sd-se-wd-bk)));
+        --_sf-sd-pg: var(--_ctm-mob-dn-im-se-sd-se-pg,
+            var(--_ctm-tab-dn-im-se-sd-se-pg, var(--_ctm-dn-im-se-sd-se-pg)));
       }
 
       .option {
@@ -412,10 +322,8 @@ $widgetFontProps:
         border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs));
         border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh));
 
-        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae))
-          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br))
-          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd))
-          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
+        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
+
         //
         &[data-selected="true"] {
           // `.option` only ever declared padding from the hover variable, so
@@ -428,45 +336,40 @@ $widgetFontProps:
           border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se));
           border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-wh));
           border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-rs));
-          box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae))
-            var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br))
-            var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd))
-            var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
+          box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-sw-cr));
+
           .language__name {
             color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
             font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
             font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
             font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
-            font-style: var(
-              --_sf-sd-ft-se-ic,
-              prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic)
-            );
+            font-style: var(--_sf-sd-ft-se-ic,
+                prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
             text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-an));
             letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-lr-sg));
             line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-im-se-dt-se-le-ht-dc));
             text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
             text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-tm));
-            word-wrap: var(
-              --_sf-sd-wd-wp,
-              prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-wp, normal)
-            );
-            word-break: var(
-              --_sf-sd-wd-bk,
-              prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-bk, normal)
-            );
+            word-wrap: var(--_sf-sd-wd-wp,
+                prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-wp, normal));
+            word-break: var(--_sf-sd-wd-bk,
+                prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-bk, normal));
             -webkit-line-clamp: var(--_sf-it-clamp-sd, var(--_sf-it-clamp, 1));
             white-space: var(--_sf-it-ws-sd, var(--_sf-it-ws, nowrap));
           }
         }
       }
+
       &[data-flex-direction="column"] {
         .language__name {
           white-space: unset;
         }
       }
+
       &[data-flex-direction="row"] {
         overflow-x: auto;
       }
+
       // Matched when *either* state wants a divider, so the rules below exist and each
       // state can then decide visibility for itself — gating on the default state alone
       // meant a divider switched on only for hover could never appear.
@@ -475,83 +378,73 @@ $widgetFontProps:
         // only has to re-point them. Previously the declarations read the default
         // state's variables directly and the Widget Style > Hover > Divider controls
         // wrote to `--_ctm-dn-wt-se-hr-se-dr-*`, which nothing ever read.
-        --_sf-dr-wt: var(
-          --_ctm-mob-dn-wt-se-dt-se-dr-wt,
-          var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt))
-        );
-        --_sf-dr-cr: var(
-          --_ctm-mob-dn-wt-se-dt-se-dr-cr,
-          var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr))
-        );
+        --_sf-dr-wt: var(--_ctm-mob-dn-wt-se-dt-se-dr-wt,
+            var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt)));
+        --_sf-dr-cr: var(--_ctm-mob-dn-wt-se-dt-se-dr-cr,
+            var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr)));
 
         // Divider lives under Widget Style, so its hover state is the *widget* being
         // hovered, not an individual option. Scoping this to `.option:hover` only
         // repainted the hovered option's own divider, which read as "not working".
         &:hover {
-          --_sf-dr-wt: var(
-            --_ctm-mob-dn-wt-se-hr-se-dr-wt,
-            var(
-              --_ctm-tab-dn-wt-se-hr-se-dr-wt,
-              var(
-                --_ctm-dn-wt-se-hr-se-dr-wt,
-                var(
-                  --_ctm-mob-dn-wt-se-dt-se-dr-wt,
-                  var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt))
-                )
-              )
-            )
-          );
-          --_sf-dr-cr: var(
-            --_ctm-mob-dn-wt-se-hr-se-dr-cr,
-            var(
-              --_ctm-tab-dn-wt-se-hr-se-dr-cr,
-              var(
-                --_ctm-dn-wt-se-hr-se-dr-cr,
-                var(
-                  --_ctm-mob-dn-wt-se-dt-se-dr-cr,
-                  var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr))
-                )
-              )
-            )
-          );
+          --_sf-dr-wt: var(--_ctm-mob-dn-wt-se-hr-se-dr-wt,
+              var(--_ctm-tab-dn-wt-se-hr-se-dr-wt,
+                var(--_ctm-dn-wt-se-hr-se-dr-wt,
+                  var(--_ctm-mob-dn-wt-se-dt-se-dr-wt,
+                    var(--_ctm-tab-dn-wt-se-dt-se-dr-wt, var(--_ctm-dn-wt-se-dt-se-dr-wt))))));
+          --_sf-dr-cr: var(--_ctm-mob-dn-wt-se-hr-se-dr-cr,
+              var(--_ctm-tab-dn-wt-se-hr-se-dr-cr,
+                var(--_ctm-dn-wt-se-hr-se-dr-cr,
+                  var(--_ctm-mob-dn-wt-se-dt-se-dr-cr,
+                    var(--_ctm-tab-dn-wt-se-dt-se-dr-cr, var(--_ctm-dn-wt-se-dt-se-dr-cr))))));
+        }
+
+        // Both states also collapse the weight when their own switch is off, so the space
+        // reserved below matches whether the divider is actually painted. Mirrors the
+        // `display: none` rules at the end of this block.
+        &[data-show-divider="false"]:not(:hover),
+        &[data-show-divider-hover="false"]:hover {
+          --_sf-dr-wt: 0px;
         }
 
+        // The divider is a pseudo-element, so it takes no space of its own: at a weight
+        // wider than half the item gap it used to grow back over the option's label.
+        // `dividerGapReserve` gives the option that weight as margin and
+        // `dividerGapOffset` pushes the divider into it, so the rule stays inside the gap
+        // whatever the weight. `--_sf-dr-wt` rather than the raw variables so the reserve
+        // follows the hover weight the same way the divider itself does.
         &[data-flex-direction="row"] {
+          .option:not(:last-child) {
+            @include dividerGapReserve(var(--_sf-dr-wt), right);
+          }
+
           .option:not(:last-child)::before {
             content: "";
             position: absolute;
             top: 0;
-            bottom: 0; /* For full height divider */
-            right: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-gp-bn-is,
-                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-                    ) /
-                    2
-                )
-            ); /* Half of your gap, assuming divider is centered in the gap */
-            width: var(--_sf-dr-wt); /* Divider thickness */
-            background-color: var(--_sf-dr-cr); /* Divider color */
+            bottom: 0;
+            /* For full height divider */
+            right: dividerGapOffset(var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
+                var(--_sf-dr-wt));
+            width: var(--_sf-dr-wt);
+            /* Divider thickness */
+            background-color: var(--_sf-dr-cr);
+            /* Divider color */
           }
         }
+
         &[data-flex-direction="column"] {
+          .option:not(:last-child) {
+            @include dividerGapReserve(var(--_sf-dr-wt));
+          }
+
           .option:not(:last-child)::before {
             content: "";
             position: absolute;
             left: 0;
             right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-gp-bn-is,
-                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-                    ) /
-                    2
-                )
-            );
+            bottom: dividerGapOffset(var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))),
+                var(--_sf-dr-wt));
             height: var(--_sf-dr-wt);
             background-color: var(--_sf-dr-cr);
           }
@@ -563,9 +456,11 @@ $widgetFontProps:
         &[data-show-divider="false"] .option::before {
           display: none;
         }
+
         &[data-show-divider-hover="false"]:hover .option::before {
           display: none;
         }
+
         &[data-show-divider-hover="true"]:hover .option:not(:last-child)::before {
           display: block;
         }
@@ -586,6 +481,7 @@ $widgetFontProps:
         // appeared to do nothing.
         padding: var(--_sf-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-pg));
         gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+
         .language__name {
           width: 100%;
           // Widget Style's per-state values first; the retired Widget Placeholder Text
@@ -608,10 +504,12 @@ $widgetFontProps:
       .language__name {
         color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-cr));
         font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-fy));
+
         &.flex__overflow {
           white-space: normal;
           @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
         }
+
         font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se));
         font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-wt));
         font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ft-se-ic));
@@ -659,10 +557,12 @@ $widgetFontProps:
         // the two swap in the markup as soon as an option is picked, so they have to
         // resolve identically or the text would jump on first selection.
         font-family: var(--_sf-wt-ft-fy, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy));
+
         &.flex__overflow {
           white-space: normal;
           @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
         }
+
         font-size: var(--_sf-wt-ft-se, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se));
         color: var(--_sf-wt-cr, prepareMediaVariable(--_ctm-dn-wt-pr-tt-cr));
         // color: var(--_gray-600);
@@ -684,10 +584,12 @@ $widgetFontProps:
         -webkit-line-clamp: var(--_sf-it-clamp, 1);
         white-space: var(--_sf-it-ws, nowrap);
       }
+
       .est__dropdown__main {
         position: relative;
         width: 100%;
         margin-top: 0px;
+
         label {
           font-size: 14px;
           color: var(--_gray-700);
@@ -717,99 +619,55 @@ $widgetFontProps:
             // branches of the same markup.
             @include widgetStateFont(dt-se);
             padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-            background-color: var(
-              --_ctm-mob-dn-wt-se-dt-se-bd-cr,
-              var(--_ctm-tab-dn-wt-se-dt-se-bd-cr, var(--_ctm-dn-wt-se-dt-se-bd-cr))
-            );
-
-            border-color: var(
-              --_ctm-mob-dn-wt-se-dt-se-br-cr,
-              var(--_ctm-tab-dn-wt-se-dt-se-br-cr, var(--_ctm-dn-wt-se-dt-se-br-cr))
-            );
-
-            border-style: var(
-              --_ctm-mob-dn-wt-se-dt-se-br-se,
-              var(--_ctm-tab-dn-wt-se-dt-se-br-se, var(--_ctm-dn-wt-se-dt-se-br-se))
-            );
-
-            border-width: var(
-              --_ctm-mob-dn-wt-se-dt-se-br-wh,
-              var(--_ctm-tab-dn-wt-se-dt-se-br-wh, var(--_ctm-dn-wt-se-dt-se-br-wh))
-            );
-
-            border-radius: var(
-              --_ctm-mob-dn-wt-se-dt-se-br-rs,
-              var(--_ctm-tab-dn-wt-se-dt-se-br-rs, var(--_ctm-dn-wt-se-dt-se-br-rs))
-            );
-
-            box-shadow: var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-dn-wt-se-dt-se-sw-ae,
-                  var(--_ctm-tab-dn-wt-se-dt-se-sw-ae, var(--_ctm-dn-wt-se-dt-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-wt-se-dt-se-sw-br,
-                  var(--_ctm-tab-dn-wt-se-dt-se-sw-br, var(--_ctm-dn-wt-se-dt-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-wt-se-dt-se-sw-sd,
-                  var(--_ctm-tab-dn-wt-se-dt-se-sw-sd, var(--_ctm-dn-wt-se-dt-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-wt-se-dt-se-sw-cr,
-                  var(--_ctm-tab-dn-wt-se-dt-se-sw-cr, var(--_ctm-dn-wt-se-dt-se-sw-cr))
-                )
-            );
+            background-color: var(--_ctm-mob-dn-wt-se-dt-se-bd-cr,
+                var(--_ctm-tab-dn-wt-se-dt-se-bd-cr, var(--_ctm-dn-wt-se-dt-se-bd-cr)));
+
+            border-color: var(--_ctm-mob-dn-wt-se-dt-se-br-cr,
+                var(--_ctm-tab-dn-wt-se-dt-se-br-cr, var(--_ctm-dn-wt-se-dt-se-br-cr)));
+
+            border-style: var(--_ctm-mob-dn-wt-se-dt-se-br-se,
+                var(--_ctm-tab-dn-wt-se-dt-se-br-se, var(--_ctm-dn-wt-se-dt-se-br-se)));
+
+            border-width: var(--_ctm-mob-dn-wt-se-dt-se-br-wh,
+                var(--_ctm-tab-dn-wt-se-dt-se-br-wh, var(--_ctm-dn-wt-se-dt-se-br-wh)));
+
+            border-radius: var(--_ctm-mob-dn-wt-se-dt-se-br-rs,
+                var(--_ctm-tab-dn-wt-se-dt-se-br-rs, var(--_ctm-dn-wt-se-dt-se-br-rs)));
+
+            box-shadow: var(--_show-shadow,
+                var(--_ctm-mob-dn-wt-se-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-wt-se-dt-se-sw-ae, var(--_ctm-dn-wt-se-dt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-dt-se-sw-br,
+                  var(--_ctm-tab-dn-wt-se-dt-se-sw-br, var(--_ctm-dn-wt-se-dt-se-sw-br))) var(--_ctm-mob-dn-wt-se-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-wt-se-dt-se-sw-sd, var(--_ctm-dn-wt-se-dt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-wt-se-dt-se-sw-cr, var(--_ctm-dn-wt-se-dt-se-sw-cr))));
+
             &:hover {
               // Hover state, falling back to the default state per property so a widget
               // that only sets a hover colour keeps the default font, size and the rest.
               @include widgetStateFont(hr-se, dt-se);
-              background-color: var(
-                --_ctm-mob-dn-wt-se-hr-se-bd-cr,
-                var(--_ctm-tab-dn-wt-se-hr-se-bd-cr, var(--_ctm-dn-wt-se-hr-se-bd-cr))
-              );
-
-              border-color: var(
-                --_ctm-mob-dn-wt-se-hr-se-br-cr,
-                var(--_ctm-tab-dn-wt-se-hr-se-br-cr, var(--_ctm-dn-wt-se-hr-se-br-cr))
-              );
-
-              border-style: var(
-                --_ctm-mob-dn-wt-se-hr-se-br-se,
-                var(--_ctm-tab-dn-wt-se-hr-se-br-se, var(--_ctm-dn-wt-se-hr-se-br-se))
-              );
-
-              border-width: var(
-                --_ctm-mob-dn-wt-se-hr-se-br-wh,
-                var(--_ctm-tab-dn-wt-se-hr-se-br-wh, var(--_ctm-dn-wt-se-hr-se-br-wh))
-              );
-
-              border-radius: var(
-                --_ctm-mob-dn-wt-se-hr-se-br-rs,
-                var(--_ctm-tab-dn-wt-se-hr-se-br-rs, var(--_ctm-dn-wt-se-hr-se-br-rs))
-              );
-
-              box-shadow: var(
-                --_show-shadow,
-                var(
-                    --_ctm-mob-dn-wt-se-hr-se-sw-ae,
-                    var(--_ctm-tab-dn-wt-se-hr-se-sw-ae, var(--_ctm-dn-wt-se-hr-se-sw-ae))
-                  )
-                  var(
-                    --_ctm-mob-dn-wt-se-hr-se-sw-br,
-                    var(--_ctm-tab-dn-wt-se-hr-se-sw-br, var(--_ctm-dn-wt-se-hr-se-sw-br))
-                  )
-                  var(
-                    --_ctm-mob-dn-wt-se-hr-se-sw-sd,
-                    var(--_ctm-tab-dn-wt-se-hr-se-sw-sd, var(--_ctm-dn-wt-se-hr-se-sw-sd))
-                  )
-                  var(
-                    --_ctm-mob-dn-wt-se-hr-se-sw-cr,
-                    var(--_ctm-tab-dn-wt-se-hr-se-sw-cr, var(--_ctm-dn-wt-se-hr-se-sw-cr))
-                  )
-              );
+              background-color: var(--_ctm-mob-dn-wt-se-hr-se-bd-cr,
+                  var(--_ctm-tab-dn-wt-se-hr-se-bd-cr, var(--_ctm-dn-wt-se-hr-se-bd-cr)));
+
+              border-color: var(--_ctm-mob-dn-wt-se-hr-se-br-cr,
+                  var(--_ctm-tab-dn-wt-se-hr-se-br-cr, var(--_ctm-dn-wt-se-hr-se-br-cr)));
+
+              border-style: var(--_ctm-mob-dn-wt-se-hr-se-br-se,
+                  var(--_ctm-tab-dn-wt-se-hr-se-br-se, var(--_ctm-dn-wt-se-hr-se-br-se)));
+
+              border-width: var(--_ctm-mob-dn-wt-se-hr-se-br-wh,
+                  var(--_ctm-tab-dn-wt-se-hr-se-br-wh, var(--_ctm-dn-wt-se-hr-se-br-wh)));
+
+              border-radius: var(--_ctm-mob-dn-wt-se-hr-se-br-rs,
+                  var(--_ctm-tab-dn-wt-se-hr-se-br-rs, var(--_ctm-dn-wt-se-hr-se-br-rs)));
+
+              box-shadow: var(--_show-shadow,
+                  var(--_ctm-mob-dn-wt-se-hr-se-sw-ae,
+                    var(--_ctm-tab-dn-wt-se-hr-se-sw-ae, var(--_ctm-dn-wt-se-hr-se-sw-ae))) var(--_ctm-mob-dn-wt-se-hr-se-sw-br,
+                    var(--_ctm-tab-dn-wt-se-hr-se-sw-br, var(--_ctm-dn-wt-se-hr-se-sw-br))) var(--_ctm-mob-dn-wt-se-hr-se-sw-sd,
+                    var(--_ctm-tab-dn-wt-se-hr-se-sw-sd, var(--_ctm-dn-wt-se-hr-se-sw-sd))) var(--_ctm-mob-dn-wt-se-hr-se-sw-cr,
+                    var(--_ctm-tab-dn-wt-se-hr-se-sw-cr, var(--_ctm-dn-wt-se-hr-se-sw-cr))));
             }
+
             .option_select {
               // Truncation is handled by `.language__name` inside, which knows whether
               // Text Overflow is on and how many lines to clamp to. A `white-space:
@@ -824,6 +682,7 @@ $widgetFontProps:
             // Safe to scope on the wrapper: the options list is its sibling, not a
             // descendant, so option labels keep their own Item Style clamp.
             &:hover {
+
               .language__name,
               .value__selected__new {
                 -webkit-line-clamp: var(--_sf-it-clamp-hr, var(--_sf-it-clamp, 1));
@@ -842,8 +701,8 @@ $widgetFontProps:
             // pushing the toggle icon out of the widget.
             min-width: 0;
 
-            & > .option_select,
-            & > .value__selected__new {
+            &>.option_select,
+            &>.value__selected__new {
               flex: 1 1 auto;
               min-width: 0;
             }
@@ -854,12 +713,15 @@ $widgetFontProps:
             // right: 0;
             transition: transform 0.4s ease-in-out;
             display: flex;
+
             &.rotate__180 {
               transform: rotate(180deg);
             }
+
             &.rotate__0 {
               transform: rotate(0deg);
             }
+
             width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
             height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
 
@@ -868,10 +730,8 @@ $widgetFontProps:
               height: prepareMediaVariable(--_ctm-dn-te-in-in-se);
 
               path {
-                stroke: var(
-                  --_ctm-mob-dn-te-in-in-c1,
-                  var(--_ctm-tab-dn-te-in-cr, var(--_ctm-dn-te-in-in-c1))
-                );
+                stroke: var(--_ctm-mob-dn-te-in-in-c1,
+                    var(--_ctm-tab-dn-te-in-cr, var(--_ctm-dn-te-in-in-c1)));
                 // Overrides the stroke-width presentation attribute baked into the icon markup.
                 stroke-width: prepareMediaVariable(--_ctm-dn-te-in-se-wh, 1.25);
               }
@@ -903,10 +763,7 @@ $widgetFontProps:
             // padding: 2px;
             // border-radius: 4px;
             // border: 1px solid var(--_gray-300);
-            box-shadow: prepareMediaVariable(--_ctm-dn-wt-dn-sw-ae)
-              prepareMediaVariable(--_ctm-dn-wt-dn-sw-br)
-              prepareMediaVariable(--_ctm-dn-wt-dn-sw-sd)
-              prepareMediaVariable(--_ctm-dn-wt-dn-sw-cr);
+            box-shadow: prepareMediaVariable(--_ctm-dn-wt-dn-sw-ae) prepareMediaVariable(--_ctm-dn-wt-dn-sw-br) prepareMediaVariable(--_ctm-dn-wt-dn-sw-sd) prepareMediaVariable(--_ctm-dn-wt-dn-sw-cr);
 
             &.top {
               bottom: 100%;
@@ -924,6 +781,7 @@ $widgetFontProps:
               //   border-radius: 4px;
               // }
             }
+
             &.show__panel {
               animation: slideUp 0.4s ease-in-out forwards;
             }
@@ -937,4 +795,4 @@ $widgetFontProps:
       }
     }
   }
-}
+}