@sc-360-v2/storefront-cms-library 0.4.75 → 0.4.77

package/dist/bulk-variant-picker.scss

@@ -616,7 +616,7 @@ $minWidth: 70px;
               .product-select-image {
                 width: 100%;
                 height: 100%;
-                object-fit: contain;
+                object-fit: cover;
               }
             }
           }
@@ -1184,172 +1184,434 @@ $minWidth: 70px;
         }
       }
       //Dropdown
-      .est__dropdown__main {
-        position: relative;
-        width: 100%;
+      //Dropdown
+      .language__conatiner {
         display: flex;
-        flex-direction: column;
-        gap: var(
-          --_ctm-mob-lt-on-te-ve-sg,
-          var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
-        );
 
-        padding: var(
-          --_ctm-mob-lt-dn-dy-se-dn-os-pg,
-          var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg))
-        );
-
-        margin-top: 10px;
-
-        label {
-          font-size: var(
-            --_ctm-mob-dn-on-te-ft-se,
-            var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
+        // Option hover state custom properties (no inherit fallback — must be guaranteed-invalid when unset)
+        .option:hover {
+          --_sf-hr-bd-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-bd-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-bd-cr, var(--_ctm-dn-dn-se-im-se-hr-se-bd-cr))
           );
-          font-family: var(
-            --_ctm-mob-dn-on-te-ft-fy,
-            var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
+          --_sf-hr-br-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-br-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-cr, var(--_ctm-dn-dn-se-im-se-hr-se-br-cr))
           );
-          color: var(
-            --_ctm-mob-dn-on-te-cr,
-            var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
+          --_sf-hr-br-se: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-br-se,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-se, var(--_ctm-dn-dn-se-im-se-hr-se-br-se))
           );
-          font-weight: var(
-            --_ctm-mob-dn-on-te-ft-wt,
-            var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
+          --_sf-hr-br-wh: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-br-wh,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-wh, var(--_ctm-dn-dn-se-im-se-hr-se-br-wh))
           );
-          text-decoration: var(
-            --_ctm-mob-dn-on-te-ue,
-            var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
+          --_sf-hr-br-rs: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-br-rs,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-br-rs, var(--_ctm-dn-dn-se-im-se-hr-se-br-rs))
           );
-          letter-spacing: var(
-            --_ctm-mob-dn-on-te-lr-sg,
-            var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
+          --_sf-hr-sw-ae: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-sw-ae,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-ae, var(--_ctm-dn-dn-se-im-se-hr-se-sw-ae))
           );
-          text-align: var(
-            --_ctm-mob-dn-on-te-tt-an,
-            var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
+          --_sf-hr-sw-br: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-sw-br,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-br, var(--_ctm-dn-dn-se-im-se-hr-se-sw-br))
           );
-          line-height: var(
-            --_ctm-mob-dn-on-te-le-ht,
-            var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
+          --_sf-hr-sw-sd: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-sw-sd,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-sd, var(--_ctm-dn-dn-se-im-se-hr-se-sw-sd))
+          );
+          --_sf-hr-sw-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-sw-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-sw-cr, var(--_ctm-dn-dn-se-im-se-hr-se-sw-cr))
+          );
+          --_sf-hr-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-cr, var(--_ctm-dn-dn-se-im-se-hr-se-cr))
+          );
+          --_sf-hr-ft-fy: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-ft-fy,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-fy, var(--_ctm-dn-dn-se-im-se-hr-se-ft-fy))
+          );
+          --_sf-hr-ft-se: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se))
+          );
+          --_sf-hr-ft-wt: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-ft-wt,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-wt, var(--_ctm-dn-dn-se-im-se-hr-se-ft-wt))
+          );
+          --_sf-hr-ft-se-ic: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-ft-se-ic,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-hr-se-ft-se-ic))
+          );
+          --_sf-hr-tt-an: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-tt-an,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-tt-an, var(--_ctm-dn-dn-se-im-se-hr-se-tt-an))
+          );
+          --_sf-hr-lr-sg: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-lr-sg,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-lr-sg, var(--_ctm-dn-dn-se-im-se-hr-se-lr-sg))
+          );
+          --_sf-hr-le-ht: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-le-ht,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-le-ht, var(--_ctm-dn-dn-se-im-se-hr-se-le-ht))
+          );
+          --_sf-hr-ue: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-ue,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-ue, var(--_ctm-dn-dn-se-im-se-hr-se-ue))
+          );
+          --_sf-hr-pg: var(
+            --_ctm-mob-dn-dn-se-im-se-hr-se-pg,
+            var(--_ctm-tab-dn-dn-se-im-se-hr-se-pg, var(--_ctm-dn-dn-se-im-se-hr-se-pg))
           );
-          display: block;
         }
 
-        .est__dropdown {
-          cursor: pointer;
-          position: relative;
-          color: var(--_gray-700);
+        // Option selected state custom properties (no inherit fallback — must be guaranteed-invalid when unset)
+        .option[data-selected="true"] {
+          --_sf-sd-bd-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-bd-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-bd-cr, var(--_ctm-dn-dn-se-im-se-sd-se-bd-cr))
+          );
+          --_sf-sd-br-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-br-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-cr, var(--_ctm-dn-dn-se-im-se-sd-se-br-cr))
+          );
+          --_sf-sd-br-se: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-br-se,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-se, var(--_ctm-dn-dn-se-im-se-sd-se-br-se))
+          );
+          --_sf-sd-br-wh: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-br-wh,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-br-wh, var(--_ctm-dn-dn-se-im-se-sd-se-br-wh))
+          );
+          --_sf-sd-sw-ae: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-sw-ae,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-ae, var(--_ctm-dn-dn-se-im-se-sd-se-sw-ae))
+          );
+          --_sf-sd-sw-br: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-sw-br,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-br, var(--_ctm-dn-dn-se-im-se-sd-se-sw-br))
+          );
+          --_sf-sd-sw-sd: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-sw-sd,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-sd, var(--_ctm-dn-dn-se-im-se-sd-se-sw-sd))
+          );
+          --_sf-sd-sw-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-sw-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-sw-cr, var(--_ctm-dn-dn-se-im-se-sd-se-sw-cr))
+          );
+          --_sf-sd-cr: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-cr,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-cr, var(--_ctm-dn-dn-se-im-se-sd-se-cr))
+          );
+          --_sf-sd-ft-fy: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-ft-fy,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-fy, var(--_ctm-dn-dn-se-im-se-sd-se-ft-fy))
+          );
+          --_sf-sd-ft-se: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se))
+          );
+          --_sf-sd-ft-wt: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-ft-wt,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-wt, var(--_ctm-dn-dn-se-im-se-sd-se-ft-wt))
+          );
+          --_sf-sd-ft-se-ic: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-ft-se-ic,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-ft-se-ic, var(--_ctm-dn-dn-se-im-se-sd-se-ft-se-ic))
+          );
+          --_sf-sd-tt-an: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-tt-an,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-tt-an, var(--_ctm-dn-dn-se-im-se-sd-se-tt-an))
+          );
+          --_sf-sd-lr-sg: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-lr-sg,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-lr-sg, var(--_ctm-dn-dn-se-im-se-sd-se-lr-sg))
+          );
+          --_sf-sd-le-ht: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-le-ht,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-le-ht, var(--_ctm-dn-dn-se-im-se-sd-se-le-ht))
+          );
+          --_sf-sd-ue: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-ue,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-ue, var(--_ctm-dn-dn-se-im-se-sd-se-ue))
+          );
+          --_sf-sd-pg: var(
+            --_ctm-mob-dn-dn-se-im-se-sd-se-pg,
+            var(--_ctm-tab-dn-dn-se-im-se-sd-se-pg, var(--_ctm-dn-dn-se-im-se-sd-se-pg))
+          );
+        }
 
-          border-radius: 6px;
-          background-color: #fff;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
+        // Placeholder text
+        .value__selected__new {
           width: 100%;
-          .value__selected {
-            width: 100%;
-          }
+          font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-fy);
+          font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se);
+          color: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-cr);
+          font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-wt);
+          text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ue);
+          font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-ft-se-ic);
+          text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-tt-an);
+          letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-lr-sg);
+          line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-le-ht);
+          padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-pr-tt-pg);
+          @include restrictToLinesShow(1);
+        }
 
-          &.open .list {
-            display: none;
-            margin-top: var(
-              --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
-              var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
-            );
-            gap: var(
-              --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
-              var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
-            );
-            background-color: var(
-              --_ctm-mob-dn-dn-se-bd-cr,
-              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
-            );
+        .est__dropdown__main {
+          position: relative;
+          width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-wh);
+          margin-top: 0px;
+
+          label {
+            font-size: 14px;
+            color: var(--_gray-700);
+            margin-bottom: 8px;
+            display: block;
           }
 
-          .list {
-            display: flex !important;
-            flex-direction: column;
-            gap: var(
-              --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
-              var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
-            );
-            border: var(
-                --_ctm-mob-dn-dn-se-br-wh,
-                var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
-              )
-              var(
-                --_ctm-mob-dn-dn-se-br-se,
-                var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
-              )
-              var(
-                --_gray-200,
-                var(
-                  --_ctm-mob-dn-dn-se-br-cr,
-                  var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
-                )
-              );
-            border-radius: var(
-              --_ctm-mob-dn-dn-se-br-rs,
-              var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
-            );
-            box-shadow: var(
-              --_show-shadow-dn-se,
-              var(
-                  --_ctm-mob-dn-dn-se-sw-ae,
-                  var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-dn-dn-se-sw-br,
-                  var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-dn-dn-se-sw-sd,
-                  var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-dn-dn-se-sw-cr,
-                  var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
-                )
-            );
-            position: absolute;
-            top: 100%;
-            left: 0;
+          .est__dropdown {
+            cursor: pointer;
+            position: relative;
+            color: var(--_gray-700);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             width: 100%;
-            background-color: var(
-              --_ctm-mob-dn-dn-se-bd-cr,
-              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
-            );
-            border-radius: 4px;
-            z-index: var(--_higher-zIndex);
-            max-height: 200px;
-            overflow-y: auto;
 
-            &.top {
-              bottom: 100%;
-              top: auto;
+            .est__dropdown__button {
+              display: flex;
+              align-items: center;
+              width: 100%;
+              position: relative;
+              gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-im-gp);
+
+              // Widget style — border
+              padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-pg);
+              border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-cr);
+              border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-se);
+              border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-wh);
+              border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-br-rs);
+
+              // Widget style — shadow
+              box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-ae)
+                prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-br)
+                prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-sd)
+                prepareMediaVariable(--_ctm-dn-dn-se-wt-se-sw-cr);
+
+              // Widget style — font
+              color: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-cr);
+              font-family: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-fy);
+              font-size: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se);
+              font-weight: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-wt);
+              font-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ft-se-ic);
+              text-decoration: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-ue);
+              text-align: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-tt-an);
+              letter-spacing: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-lr-sg);
+              line-height: prepareMediaVariable(--_ctm-dn-dn-se-wt-se-le-ht);
+
+              .option_select {
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
             }
 
-            .list__option {
-              padding: var(
-                --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
-                var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
-              );
-              cursor: pointer;
+            .est__dropdown__icon {
+              transition: transform 0.4s ease-in-out;
+              display: flex;
+              &.rotate__180 {
+                transform: rotate(180deg);
+              }
+              &.rotate__0 {
+                transform: rotate(0deg);
+              }
+              width: 16px;
+              height: 16px;
+              svg {
+                width: 100%;
+                height: 100%;
+              }
+            }
 
-              &:hover {
-                background-color: var(--_primary-25);
-                color: var(--_primary-400);
+            .list {
+              flex-direction: column;
+              position: absolute;
+              top: 100%;
+              left: 0;
+              width: 100%;
+              z-index: var(--_higher-zIndex);
+              max-height: 200px;
+              overflow-y: auto;
+
+              // Widget dropdown styles
+              background-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-bd-cr);
+              border-radius: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-rs);
+              border-width: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-wh);
+              border-style: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-se);
+              border-color: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-br-cr);
+              padding: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-pg);
+              gap: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-im-gp);
+              box-shadow: prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-ae)
+                prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-br)
+                prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-sd)
+                prepareMediaVariable(--_ctm-dn-dn-se-wt-dn-sw-cr);
+
+              &.top {
+                bottom: 100%;
+                top: auto;
               }
 
-              &.disabled {
-                cursor: not-allowed;
-                opacity: 0.4;
+              .option {
+                cursor: pointer;
+              }
+
+              &.show__panel {
+                animation: slideUp 0.4s ease-in-out;
+              }
+
+              &.hide__panel {
+                animation: slideDown 0.4s ease-in-out;
+                pointer-events: none;
               }
             }
           }
         }
+
+        // Option default styles
+        .option {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          position: relative;
+          box-sizing: border-box;
+
+          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-pg));
+          border-color: var(
+            --_sf-hr-br-cr,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
+          );
+          background-color: var(
+            --_sf-hr-bd-cr,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
+          );
+          border-style: var(
+            --_sf-hr-br-se,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
+          );
+          border-radius: var(
+            --_sf-hr-br-rs,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
+          );
+          border-width: var(
+            --_sf-hr-br-wh,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
+          );
+
+          box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
+            var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
+            var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
+            var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
+
+          &[data-selected="true"] {
+            border-color: var(
+              --_sf-sd-br-cr,
+              prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-cr)
+            );
+            background-color: var(
+              --_sf-sd-bd-cr,
+              prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-bd-cr)
+            );
+            border-style: var(
+              --_sf-sd-br-se,
+              prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-se)
+            );
+            border-width: var(
+              --_sf-sd-br-wh,
+              prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-wh)
+            );
+            border-radius: var(
+              --_sf-sd-br-rs,
+              prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-br-rs)
+            );
+            box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-ae))
+              var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-br))
+              var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-sd))
+              var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-sw-cr));
+            .language__name {
+              color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
+              font-family: var(
+                --_sf-sd-ft-fy,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy)
+              );
+              font-size: var(
+                --_sf-sd-ft-se,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se)
+              );
+              font-weight: var(
+                --_sf-sd-ft-wt,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt)
+              );
+              font-style: var(
+                --_sf-sd-ft-se-ic,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
+              );
+              text-align: var(
+                --_sf-sd-tt-an,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an)
+              );
+              letter-spacing: var(
+                --_sf-sd-lr-sg,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
+              );
+              line-height: var(
+                --_sf-sd-le-ht,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht)
+              );
+              text-decoration: var(
+                --_sf-sd-ue,
+                prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue)
+              );
+              @include restrictToLinesShow(1);
+            }
+          }
+        }
+
+        .option_select {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          position: relative;
+          .language__name {
+            color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
+            @include restrictToLinesShow(1);
+          }
+        }
+
+        .language__name {
+          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-cr));
+          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-fy));
+          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se));
+          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-wt));
+          font-style: var(
+            --_sf-hr-ft-se-ic,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ft-se-ic)
+          );
+          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-tt-an));
+          letter-spacing: var(
+            --_sf-hr-lr-sg,
+            prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-lr-sg)
+          );
+          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-le-ht));
+          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dn-se-im-se-dt-se-ue));
+          white-space: nowrap;
+          @include restrictToLinesShow(1);
+        }
       }
 
       // variant dropdown selection
@@ -1365,6 +1627,7 @@ $minWidth: 70px;
         );
 
         flex-direction: row;
+        flex-wrap: wrap;
         &[data-dropdown-style="Vertical List"] {
           flex-direction: column;
           gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
@@ -1417,9 +1680,6 @@ $minWidth: 70px;
             }
           }
         }
-        & > div {
-          width: 100%;
-        }
       }
       // Quantity Fields
       .field__group {