@sc-360-v2/storefront-cms-library 0.5.69 → 0.5.71

package/dist/language-selector.scss

@@ -1,948 +1,948 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-// Widget Style > Placeholder Text. The section is per-state (Default / Hover) and its
-// typography reached the stylesheet as `--_ctm-dn-wt-se-{dt,hr}-se-*` that nothing
-// read, so both states looked dead in the panel. Both states publish the same
-// `--_sf-wt-*` names and the hovered widget wins the cascade.
-//
-// Deliberately no final fallback inside these chains: an untouched property stays
-// invalid at computed-value time, which is what lets the consumers fall back to
-// `--_ctm-dn-wt-pr-tt-*`. Those come from the retired Widget Placeholder Text
-// 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;
-
-@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})
-    );
-  }
-}
-
-[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 {
-      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,
-      //   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 {
-      //   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))
-      //       )
-      //   );
-      // }
-
-      // gap: var(
-      //   --_ctm-mob-lt-it-ad-mn-qy-sg,
-      //   var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
-      // );
-      display: flex;
-      gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
-
-      // "Show Border" switches — widget style (default/hover), widget dropdown and
-      // item style (default/hover/selected). Each state is gated on its own switch.
-      // border-style is reset alongside the width: a state whose width variables are
-      // unset resolves border-width to the initial `medium`, so zeroing the width
-      // alone still leaves a border painted in whatever border-style is in effect.
-      &[data-widget-border="false"] {
-        .est__dropdown__main .est__dropdown .dropdown__button__wrapper {
-          border-width: 0;
-          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;
-          border-style: none;
-        }
-      }
-
-      .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))
-        );
-
-        // 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))
-        );
-
-        // 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))
-        );
-      }
-
-      .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))
-        );
-        // 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))
-        );
-        // 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))
-        );
-
-        // 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))
-        );
-      }
-
-      .option {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        justify-content: var(--_ctm-mob-lt-at, var(--_ctm-tab-lt-at, var(--_ctm-lt-at)));
-
-        position: relative;
-        box-sizing: border-box;
-        // Without this a flex item refuses to shrink below its content width, so a
-        // larger font size pushed the label straight out of the widget.
-        // min-width: 0;
-
-        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg));
-        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr));
-
-        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr));
-        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se));
-        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));
-        //
-        &[data-selected="true"] {
-          // `.option` only ever declared padding from the hover variable, so
-          // `--_sf-sd-pg` was set by the selected-state block but never read and
-          // Selected > Padding did nothing.
-          padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg));
-          border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr));
-
-          background-color: var(--_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr));
-          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));
-          .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)
-            );
-            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)
-            );
-            -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.
-      &:is([data-show-divider="true"], [data-show-divider-hover="true"]) {
-        // Divider weight/colour resolve through these two, so the hover block below
-        // 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))
-        );
-
-        // 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))
-                )
-              )
-            )
-          );
-        }
-
-        // 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: 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: 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);
-          }
-        }
-
-        // Each state's own Show Divider switch. Declared last so they win over the
-        // `::before` rules above, and split by state so turning the divider off for
-        // hover only affects the hovered widget.
-        &[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;
-        }
-      }
-
-      .option_select {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: var(--_ctm-mob-lt-at, var(--_ctm-tab-lt-at, var(--_ctm-lt-at)));
-
-        position: relative;
-        min-width: 0;
-
-        // Widget Style > padding (was Widget Placeholder Text > padding). It used to sit
-        // on `.value__selected__new` only, which is the *empty* state — as soon as an
-        // option was selected the markup switched to this branch and the padding
-        // 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
-          // variables remain only as a fallback for pages saved before the two merged.
-          font-family: var(--_sf-wt-ft-fy, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy));
-          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));
-          font-weight: var(--_sf-wt-ft-wt, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-wt));
-          text-decoration: var(--_sf-wt-ue, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ue));
-          font-style: var(--_sf-wt-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se-ic));
-          text-align: var(--_sf-wt-tt-an, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-an));
-          letter-spacing: var(--_sf-wt-lr-sg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-lr-sg));
-          line-height: var(--_sf-wt-le-ht, prepareMediaVariable(--_ctm-dn-wt-pr-tt-le-ht));
-          text-transform: var(--_sf-wt-tt-tm, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-tm));
-          word-wrap: var(--_sf-wt-wd-wp, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-wp, normal));
-          word-break: var(--_sf-wt-wd-bk, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-bk, normal));
-        }
-      }
-
-      .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));
-        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-an));
-        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-lr-sg));
-        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-im-se-dt-se-le-ht));
-        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
-        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-tm));
-        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-wp, normal));
-        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-bk, normal));
-
-        // text-align only has room to act once the label owns the line box — as a
-        // content-sized flex item it hugged its text, so every alignment looked the
-        // same. `min-width: 0` keeps it shrinkable so a larger font size truncates
-        // instead of overflowing the widget.
-        flex: 1 1 auto;
-        min-width: 0;
-        max-width: 100%;
-
-        // Text Overflow is driven entirely by the two clamp custom properties the
-        // element sets per interaction state (see LanguageMenuElement/DropdownComponent):
-        // off resolves to 1 nowrap line, on to N wrapped lines. Keeping the box display
-        // constant means the hover and selected rules below only have to swap the pair,
-        // which a marker class could not express.
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: var(--_sf-it-clamp, 1);
-        white-space: var(--_sf-it-ws, nowrap);
-      }
-
-      .option:hover .language__name {
-        -webkit-line-clamp: var(--_sf-it-clamp-hr, var(--_sf-it-clamp, 1));
-        white-space: var(--_sf-it-ws-hr, var(--_sf-it-ws, nowrap));
-      }
-
-      //Dropdown
-      .value__selected__new {
-        width: 100%;
-        // padding: 8px 12px;
-        // text-align: left;
-        // Same order as `.option_select .language__name` above: Widget Style's per-state
-        // typography first, Widget Placeholder Text second. This is the empty branch —
-        // 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);
-        font-weight: var(--_sf-wt-ft-wt, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-wt));
-        text-decoration: var(--_sf-wt-ue, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ue));
-        font-style: var(--_sf-wt-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se-ic));
-        text-align: var(--_sf-wt-tt-an, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-an));
-        letter-spacing: var(--_sf-wt-lr-sg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-lr-sg));
-        line-height: var(--_sf-wt-le-ht, prepareMediaVariable(--_ctm-dn-wt-pr-tt-le-ht));
-        padding: var(--_sf-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-pg));
-        text-transform: var(--_sf-wt-tt-tm, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-tm));
-        word-wrap: var(--_sf-wt-wd-wp, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-wp, normal));
-        word-break: var(--_sf-wt-wd-bk, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-bk, normal));
-        min-width: 0;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -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);
-          margin-bottom: 8px;
-          display: block;
-        }
-
-        .est__dropdown {
-          cursor: pointer;
-          position: relative;
-          color: var(--_gray-700);
-
-          // border-radius: 6px;
-          // background-color: #fff;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);
-
-          width: 100%;
-
-          .dropdown__button__wrapper {
-            width: 100%;
-            // Widget Style > Placeholder Text, default state. Published here rather than
-            // on the text nodes because the hover state below has to override it, and
-            // `.value__selected__new` / `.option_select .language__name` are two separate
-            // 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))
-                )
-            );
-            &: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))
-                  )
-              );
-            }
-            .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:
-              // nowrap` here inherited down and defeated the multi-line clamp.
-              overflow: hidden;
-            }
-
-            // Widget Style > Hover > Text Overflow. The clamp pair reaches the DOM as an
-            // inline style (it is `controls`, not CSS), so hover cannot be expressed by
-            // the variable cascade above — the element publishes both pairs on the label
-            // and this rule chooses the hovered one, falling back to the default pair.
-            // 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));
-                white-space: var(--_sf-it-ws-hr, var(--_sf-it-ws, nowrap));
-              }
-            }
-          }
-
-          .est__dropdown__button {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            position: relative;
-            gap: 8px;
-            // Keeps the label shrinkable so a larger font size truncates instead of
-            // pushing the toggle icon out of the widget.
-            min-width: 0;
-
-            & > .option_select,
-            & > .value__selected__new {
-              flex: 1 1 auto;
-              min-width: 0;
-            }
-          }
-
-          .est__dropdown__icon {
-            // position: absolute;
-            // 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);
-
-            svg {
-              width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
-              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))
-                );
-                // Overrides the stroke-width presentation attribute baked into the icon markup.
-                stroke-width: prepareMediaVariable(--_ctm-dn-te-in-se-wh, 1.25);
-              }
-            }
-          }
-
-          .list {
-            flex-direction: column;
-            border: 1px solid var(--_gray-200);
-            border-radius: 6px;
-            position: absolute;
-            top: 100%;
-            left: 0;
-            width: 100%;
-            padding: 4px;
-            background-color: prepareMediaVariable(--_ctm-dn-wt-dn-bd-cr);
-            border-radius: prepareMediaVariable(--_ctm-dn-wt-dn-br-rs);
-            z-index: var(--_higher-zIndex);
-            max-height: 200px;
-            overflow-y: auto;
-            border-width: prepareMediaVariable(--_ctm-dn-wt-dn-br-wh);
-            border-style: prepareMediaVariable(--_ctm-dn-wt-dn-br-se);
-            border-color: prepareMediaVariable(--_ctm-dn-wt-dn-br-cr);
-            // margin-top: var(
-            //   --_ctm-mob-lt-gp-bn-is,
-            //   var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-            // );
-            gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
-            // 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);
-
-            &.top {
-              bottom: 100%;
-              top: auto;
-            }
-
-            .option {
-              cursor: pointer;
-              // &:not(:last-child) {
-              //   margin-bottom: 2px;
-              // }
-              // padding: 4px;
-              // &:hover {
-              //   background: var(--_gray-100);
-              //   border-radius: 4px;
-              // }
-            }
-            &.show__panel {
-              animation: slideUp 0.4s ease-in-out forwards;
-            }
-
-            &.hide__panel {
-              animation: slideDown 0.4s ease-in-out forwards;
-              pointer-events: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+// Widget Style > Placeholder Text. The section is per-state (Default / Hover) and its
+// typography reached the stylesheet as `--_ctm-dn-wt-se-{dt,hr}-se-*` that nothing
+// read, so both states looked dead in the panel. Both states publish the same
+// `--_sf-wt-*` names and the hovered widget wins the cascade.
+//
+// Deliberately no final fallback inside these chains: an untouched property stays
+// invalid at computed-value time, which is what lets the consumers fall back to
+// `--_ctm-dn-wt-pr-tt-*`. Those come from the retired Widget Placeholder Text
+// 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;
+
+@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})
+    );
+  }
+}
+
+[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 {
+      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,
+      //   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 {
+      //   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))
+      //       )
+      //   );
+      // }
+
+      // gap: var(
+      //   --_ctm-mob-lt-it-ad-mn-qy-sg,
+      //   var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
+      // );
+      display: flex;
+      gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
+
+      // "Show Border" switches — widget style (default/hover), widget dropdown and
+      // item style (default/hover/selected). Each state is gated on its own switch.
+      // border-style is reset alongside the width: a state whose width variables are
+      // unset resolves border-width to the initial `medium`, so zeroing the width
+      // alone still leaves a border painted in whatever border-style is in effect.
+      &[data-widget-border="false"] {
+        .est__dropdown__main .est__dropdown .dropdown__button__wrapper {
+          border-width: 0;
+          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;
+          border-style: none;
+        }
+      }
+
+      .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))
+        );
+
+        // 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))
+        );
+
+        // 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))
+        );
+      }
+
+      .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))
+        );
+        // 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))
+        );
+        // 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))
+        );
+
+        // 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))
+        );
+      }
+
+      .option {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        justify-content: var(--_ctm-mob-lt-at, var(--_ctm-tab-lt-at, var(--_ctm-lt-at)));
+
+        position: relative;
+        box-sizing: border-box;
+        // Without this a flex item refuses to shrink below its content width, so a
+        // larger font size pushed the label straight out of the widget.
+        // min-width: 0;
+
+        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg));
+        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr));
+
+        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr));
+        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-se));
+        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));
+        //
+        &[data-selected="true"] {
+          // `.option` only ever declared padding from the hover variable, so
+          // `--_sf-sd-pg` was set by the selected-state block but never read and
+          // Selected > Padding did nothing.
+          padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-pg));
+          border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-br-cr));
+
+          background-color: var(--_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-im-se-dt-se-bd-cr));
+          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));
+          .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)
+            );
+            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)
+            );
+            -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.
+      &:is([data-show-divider="true"], [data-show-divider-hover="true"]) {
+        // Divider weight/colour resolve through these two, so the hover block below
+        // 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))
+        );
+
+        // 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))
+                )
+              )
+            )
+          );
+        }
+
+        // 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: 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: 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);
+          }
+        }
+
+        // Each state's own Show Divider switch. Declared last so they win over the
+        // `::before` rules above, and split by state so turning the divider off for
+        // hover only affects the hovered widget.
+        &[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;
+        }
+      }
+
+      .option_select {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: var(--_ctm-mob-lt-at, var(--_ctm-tab-lt-at, var(--_ctm-lt-at)));
+
+        position: relative;
+        min-width: 0;
+
+        // Widget Style > padding (was Widget Placeholder Text > padding). It used to sit
+        // on `.value__selected__new` only, which is the *empty* state — as soon as an
+        // option was selected the markup switched to this branch and the padding
+        // 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
+          // variables remain only as a fallback for pages saved before the two merged.
+          font-family: var(--_sf-wt-ft-fy, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-fy));
+          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));
+          font-weight: var(--_sf-wt-ft-wt, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-wt));
+          text-decoration: var(--_sf-wt-ue, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ue));
+          font-style: var(--_sf-wt-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se-ic));
+          text-align: var(--_sf-wt-tt-an, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-an));
+          letter-spacing: var(--_sf-wt-lr-sg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-lr-sg));
+          line-height: var(--_sf-wt-le-ht, prepareMediaVariable(--_ctm-dn-wt-pr-tt-le-ht));
+          text-transform: var(--_sf-wt-tt-tm, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-tm));
+          word-wrap: var(--_sf-wt-wd-wp, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-wp, normal));
+          word-break: var(--_sf-wt-wd-bk, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-bk, normal));
+        }
+      }
+
+      .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));
+        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-an));
+        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-im-se-dt-se-lr-sg));
+        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-im-se-dt-se-le-ht));
+        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
+        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-im-se-dt-se-tt-tm));
+        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-wp, normal));
+        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-im-se-dt-se-wd-bk, normal));
+
+        // text-align only has room to act once the label owns the line box — as a
+        // content-sized flex item it hugged its text, so every alignment looked the
+        // same. `min-width: 0` keeps it shrinkable so a larger font size truncates
+        // instead of overflowing the widget.
+        flex: 1 1 auto;
+        min-width: 0;
+        max-width: 100%;
+
+        // Text Overflow is driven entirely by the two clamp custom properties the
+        // element sets per interaction state (see LanguageMenuElement/DropdownComponent):
+        // off resolves to 1 nowrap line, on to N wrapped lines. Keeping the box display
+        // constant means the hover and selected rules below only have to swap the pair,
+        // which a marker class could not express.
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: var(--_sf-it-clamp, 1);
+        white-space: var(--_sf-it-ws, nowrap);
+      }
+
+      .option:hover .language__name {
+        -webkit-line-clamp: var(--_sf-it-clamp-hr, var(--_sf-it-clamp, 1));
+        white-space: var(--_sf-it-ws-hr, var(--_sf-it-ws, nowrap));
+      }
+
+      //Dropdown
+      .value__selected__new {
+        width: 100%;
+        // padding: 8px 12px;
+        // text-align: left;
+        // Same order as `.option_select .language__name` above: Widget Style's per-state
+        // typography first, Widget Placeholder Text second. This is the empty branch —
+        // 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);
+        font-weight: var(--_sf-wt-ft-wt, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-wt));
+        text-decoration: var(--_sf-wt-ue, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ue));
+        font-style: var(--_sf-wt-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-pr-tt-ft-se-ic));
+        text-align: var(--_sf-wt-tt-an, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-an));
+        letter-spacing: var(--_sf-wt-lr-sg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-lr-sg));
+        line-height: var(--_sf-wt-le-ht, prepareMediaVariable(--_ctm-dn-wt-pr-tt-le-ht));
+        padding: var(--_sf-wt-pg, prepareMediaVariable(--_ctm-dn-wt-pr-tt-pg));
+        text-transform: var(--_sf-wt-tt-tm, prepareMediaVariable(--_ctm-dn-wt-pr-tt-tt-tm));
+        word-wrap: var(--_sf-wt-wd-wp, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-wp, normal));
+        word-break: var(--_sf-wt-wd-bk, prepareMediaVariable(--_ctm-dn-wt-pr-tt-wd-bk, normal));
+        min-width: 0;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -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);
+          margin-bottom: 8px;
+          display: block;
+        }
+
+        .est__dropdown {
+          cursor: pointer;
+          position: relative;
+          color: var(--_gray-700);
+
+          // border-radius: 6px;
+          // background-color: #fff;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);
+
+          width: 100%;
+
+          .dropdown__button__wrapper {
+            width: 100%;
+            // Widget Style > Placeholder Text, default state. Published here rather than
+            // on the text nodes because the hover state below has to override it, and
+            // `.value__selected__new` / `.option_select .language__name` are two separate
+            // 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))
+                )
+            );
+            &: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))
+                  )
+              );
+            }
+            .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:
+              // nowrap` here inherited down and defeated the multi-line clamp.
+              overflow: hidden;
+            }
+
+            // Widget Style > Hover > Text Overflow. The clamp pair reaches the DOM as an
+            // inline style (it is `controls`, not CSS), so hover cannot be expressed by
+            // the variable cascade above — the element publishes both pairs on the label
+            // and this rule chooses the hovered one, falling back to the default pair.
+            // 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));
+                white-space: var(--_sf-it-ws-hr, var(--_sf-it-ws, nowrap));
+              }
+            }
+          }
+
+          .est__dropdown__button {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            position: relative;
+            gap: 8px;
+            // Keeps the label shrinkable so a larger font size truncates instead of
+            // pushing the toggle icon out of the widget.
+            min-width: 0;
+
+            & > .option_select,
+            & > .value__selected__new {
+              flex: 1 1 auto;
+              min-width: 0;
+            }
+          }
+
+          .est__dropdown__icon {
+            // position: absolute;
+            // 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);
+
+            svg {
+              width: prepareMediaVariable(--_ctm-dn-te-in-in-se);
+              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))
+                );
+                // Overrides the stroke-width presentation attribute baked into the icon markup.
+                stroke-width: prepareMediaVariable(--_ctm-dn-te-in-se-wh, 1.25);
+              }
+            }
+          }
+
+          .list {
+            flex-direction: column;
+            border: 1px solid var(--_gray-200);
+            border-radius: 6px;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 100%;
+            padding: 4px;
+            background-color: prepareMediaVariable(--_ctm-dn-wt-dn-bd-cr);
+            border-radius: prepareMediaVariable(--_ctm-dn-wt-dn-br-rs);
+            z-index: var(--_higher-zIndex);
+            max-height: 200px;
+            overflow-y: auto;
+            border-width: prepareMediaVariable(--_ctm-dn-wt-dn-br-wh);
+            border-style: prepareMediaVariable(--_ctm-dn-wt-dn-br-se);
+            border-color: prepareMediaVariable(--_ctm-dn-wt-dn-br-cr);
+            // margin-top: var(
+            //   --_ctm-mob-lt-gp-bn-is,
+            //   var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
+            // );
+            gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
+            // 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);
+
+            &.top {
+              bottom: 100%;
+              top: auto;
+            }
+
+            .option {
+              cursor: pointer;
+              // &:not(:last-child) {
+              //   margin-bottom: 2px;
+              // }
+              // padding: 4px;
+              // &:hover {
+              //   background: var(--_gray-100);
+              //   border-radius: 4px;
+              // }
+            }
+            &.show__panel {
+              animation: slideUp 0.4s ease-in-out forwards;
+            }
+
+            &.hide__panel {
+              animation: slideDown 0.4s ease-in-out forwards;
+              pointer-events: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}