@sc-360-v2/storefront-cms-library 0.4.47 → 0.4.50

package/dist/language-selector.scss

@@ -1,558 +1,528 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-
-[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-bd-cr,
-        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
-      );
-
-      border-color: var(
-        --_ctm-mob-dn-wt-se-br-cr,
-        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
-      );
-
-      border-style: var(
-        --_ctm-mob-dn-wt-se-br-se,
-        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
-      );
-
-      border-width: var(
-        --_ctm-mob-dn-wt-se-br-wh,
-        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
-      );
-
-      border-radius: var(
-        --_ctm-mob-dn-wt-se-br-rs,
-        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
-      );
-
-      box-shadow: var(
-        --_show-shadow,
-        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
-          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
-          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
-          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-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)));
-
-      .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))
-        );
-      }
-
-      .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))
-        );
-        // 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))
-        );
-      }
-
-      &[data-flag-style="Rounded"] {
-        .language__flag {
-          border-radius: 5px;
-          svg {
-            border-radius: 5px;
-          }
-        }
-      }
-      &[data-flag-style="Circle"] {
-        .language__flag {
-          border-radius: 50%;
-          svg {
-            border-radius: 50%;
-          }
-        }
-      }
-
-      .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;
-
-        padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-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"] {
-          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));
-          }
-        }
-      }
-      &[data-flex-direction="column"] {
-        .language__name {
-          white-space: unset;
-        }
-      }
-      &[data-flex-direction="row"] {
-        overflow-x: auto;
-      }
-      &[data-show-divider="true"] {
-        &[data-flex-direction="row"] {
-          .option:not(:last-child)::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            bottom: 0; /* For full height divider */
-            right: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-gp-bn-is,
-                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-                    ) /
-                    2
-                )
-            ); /* Half of your gap, assuming divider is centered in the gap */
-            width: var(
-              --_ctm-mob-dn-wt-se-dr-wt,
-              var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-            ); /* Divider thickness */
-            background-color: var(
-              --_ctm-mob-dn-wt-se-dr-cr,
-              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-            ); /* Divider color */
-          }
-        }
-        &[data-flex-direction="column"] {
-          .option:not(:last-child)::before {
-            content: "";
-            position: absolute;
-            left: 0;
-            right: 0;
-            bottom: calc(
-              -1 *
-                (
-                  var(
-                      --_ctm-mob-lt-gp-bn-is,
-                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
-                    ) /
-                    2
-                )
-            );
-            height: var(
-              --_ctm-mob-dn-wt-se-dr-wt,
-              var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
-            );
-            background-color: var(
-              --_ctm-mob-dn-wt-se-dr-cr,
-              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
-            );
-          }
-        }
-      }
-
-      .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;
-
-        // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
-        .language__name {
-          color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
-        }
-      }
-      .language__flag {
-        width: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
-        height: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
-        object-fit: cover;
-        > svg {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .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));
-        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-dc));
-        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
-        white-space: nowrap;
-      }
-
-      //Dropdown
-      .value__selected__new {
-        width: 100%;
-        // padding: 8px 12px;
-        // text-align: left;
-        font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
-        font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
-        color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
-        font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
-        text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
-        font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
-        text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
-        letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
-        line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
-      }
-      .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%;
-            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
-            .option_select {
-              // padding-block: unset;
-              // display: -webkit-box;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-          }
-
-          .est__dropdown__button {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            position: relative;
-          }
-
-          .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))
-                );
-              }
-            }
-          }
-
-          .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: #fff;
-            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);
-
-            &.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;
-            }
-
-            &.hide__panel {
-              animation: slideDown 0.4s ease-in-out;
-              pointer-events: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(10px);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-}
-
-@keyframes slideDown {
-  from {
-    transform: translateY(10);
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-  to {
-    transform: translateY(0px);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+
+[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-bd-cr,
+        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
+      );
+
+      border-color: var(
+        --_ctm-mob-dn-wt-se-br-cr,
+        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
+      );
+
+      border-style: var(
+        --_ctm-mob-dn-wt-se-br-se,
+        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
+      );
+
+      border-width: var(
+        --_ctm-mob-dn-wt-se-br-wh,
+        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
+      );
+
+      border-radius: var(
+        --_ctm-mob-dn-wt-se-br-rs,
+        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
+      );
+
+      box-shadow: var(
+        --_show-shadow,
+        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
+          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
+          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
+          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-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)));
+
+      .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))
+        );
+      }
+
+      .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))
+        );
+        // 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))
+        );
+      }
+
+      &[data-flag-style="Rounded"] {
+        .language__flag {
+          border-radius: 5px;
+          svg {
+            border-radius: 5px;
+          }
+        }
+      }
+      &[data-flag-style="Circle"] {
+        .language__flag {
+          border-radius: 50%;
+          svg {
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .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;
+
+        padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-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"] {
+          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));
+          }
+        }
+      }
+      &[data-flex-direction="column"] {
+        .language__name {
+          white-space: unset;
+        }
+      }
+      &[data-flex-direction="row"] {
+        overflow-x: auto;
+      }
+      &[data-show-divider="true"] {
+        &[data-flex-direction="row"] {
+          .option:not(:last-child)::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0; /* For full height divider */
+            right: calc(
+              -1 *
+                (
+                  var(
+                      --_ctm-mob-lt-gp-bn-is,
+                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
+                    ) /
+                    2
+                )
+            ); /* Half of your gap, assuming divider is centered in the gap */
+            width: var(
+              --_ctm-mob-dn-wt-se-dr-wt,
+              var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+            ); /* Divider thickness */
+            background-color: var(
+              --_ctm-mob-dn-wt-se-dr-cr,
+              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+            ); /* Divider color */
+          }
+        }
+        &[data-flex-direction="column"] {
+          .option:not(:last-child)::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: calc(
+              -1 *
+                (
+                  var(
+                      --_ctm-mob-lt-gp-bn-is,
+                      var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is))
+                    ) /
+                    2
+                )
+            );
+            height: var(
+              --_ctm-mob-dn-wt-se-dr-wt,
+              var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
+            );
+            background-color: var(
+              --_ctm-mob-dn-wt-se-dr-cr,
+              var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
+            );
+          }
+        }
+      }
+
+      .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;
+
+        // padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
+        .language__name {
+          color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
+        }
+      }
+      .language__flag {
+        width: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
+        height: var(--_ctm-mob-lt-fg-se, var(--_ctm-tab-lt-fg-se, var(--_ctm-lt-fg-se)));
+        object-fit: cover;
+        > svg {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .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));
+        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-dc));
+        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-im-se-dt-se-ue));
+        white-space: nowrap;
+      }
+
+      //Dropdown
+      .value__selected__new {
+        width: 100%;
+        // padding: 8px 12px;
+        // text-align: left;
+        font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
+        font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
+        color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
+        font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
+        text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
+        font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
+        text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
+        letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
+        line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
+      }
+      .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%;
+            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
+            .option_select {
+              // padding-block: unset;
+              // display: -webkit-box;
+              -webkit-line-clamp: 1;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+
+          .est__dropdown__button {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            position: relative;
+          }
+
+          .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))
+                );
+              }
+            }
+          }
+
+          .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: #fff;
+            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);
+
+            &.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;
+            }
+
+            &.hide__panel {
+              animation: slideDown 0.4s ease-in-out;
+              pointer-events: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}