@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

// The value text inside a swatch moved out of design.optionValueStyle into its own
// schema, design.optionValueTextStyle, so the box and the text are edited from separate
// accordions. Pages saved before the split still carry the typography keys under the old
// section, so every value-text property resolves the new variable first and falls back to
// the old one — both across breakpoints.
@function optionValueTextVar($newVar, $legacyVar) {
  @return prepareMediaVariable($newVar, prepareMediaVariable($legacyVar));
}

// The value text's typography is not state-aware — the Option Value Text Style panel has
// no Default / Hover / Selected picker — so its keys sit flat on optionValueTextStyle
// rather than under defaultState. Three shapes can be on disk, so resolve in order: the
// flat variable, then the defaultState-nested one saved while the section still had the
// picker, then the pre-split optionValueStyle.defaultState one.
@function optionValueTextDefaultVar($flatVar, $stateVar, $legacyVar) {
  @return prepareMediaVariable(
    $flatVar,
    prepareMediaVariable($stateVar, prepareMediaVariable($legacyVar))
  );
}

[data-div-type="element"] {
  &[data-element-type="productOptions"] {
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-ele-nw-wh-vl,
            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    --_aspect-ratio: calc(
      1 *
        (
          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
        )
    );

    & > .wrapper {
      // width: 100%;
      // height: 100%;
    }
    .product__option__element {
      display: flex;
      flex-direction: column;
      min-height: 30px;
      gap: var(
        --_ctm-mob-lt-on-te-ve-sg,
        var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
      );

      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))
      );
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

      width: 100%;
      // height: 100%;
      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)))
      );

      .title {
        margin-bottom: 4px;
        color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-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))
        );
        text-transform: var(
          --_ctm-mob-dn-on-te-tt-tm,
          var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
        );
        word-wrap: var(
          --_ctm-mob-dn-on-te-wd-wp,
          var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
        );
        word-break: var(
          --_ctm-mob-dn-on-te-wd-bk,
          var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
        );
        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))
        );
        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))
        );
        font-style: var(
          --_ctm-mob-dn-on-te-ft-se-ic,
          var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
        );
        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))
        );
        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))
        );
        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))
        );
        text-decoration: var(
          --_ctm-mob-dn-on-te-ue,
          var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
        );

        // design.optionTitle container styling. The title is its own design schema, so it
        // carries the same Fill / Border / Border Radius / Shadow set as the value box.
        background-color: prepareMediaVariable(--_ctm-dn-on-te-bd-cr, transparent);
        border-color: prepareMediaVariable(--_ctm-dn-on-te-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-on-te-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-on-te-br-wh, 0px);
        border-radius: prepareMediaVariable(--_ctm-dn-on-te-br-rs, 0px);
        // Same --_show-shadow gate the widget container uses in this file.
        box-shadow: var(
          --_show-shadow,
          prepareMediaVariable(--_ctm-dn-on-te-sw-ae) prepareMediaVariable(--_ctm-dn-on-te-sw-br)
            prepareMediaVariable(--_ctm-dn-on-te-sw-sd) prepareMediaVariable(--_ctm-dn-on-te-sw-cr)
        );

        // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as a
        // variable — the renderer adds `.flex__overflow` and publishes the line count as
        // `--_sf-line-clamp`.
        &.flex__overflow {
          white-space: normal;
          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        }
      }

      .product__option__element__swatch {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        gap: var(
          --_ctm-mob-lt-on-te-ve-sg,
          var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
        );

        // margin-top: 20px;

        .swatch__list {
          display: flex;
          gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));

          width: 100%;
          // &[data-wrap-items="true"] {
          //   flex-wrap: wrap;
          // }
          // flex-wrap: wrap;
        }

        &[data-overflow-items="Wrap"] {
          .swatch__list {
            flex-wrap: wrap;
          }
        }
        &[data-overflow-items="Scroll"] {
          .swatch__list {
            overflow-x: auto;
            // Gap (layout.swatchScrollGap): clearance between the swatches and the
            // scrollbar this mode adds underneath. Padding inside the scrolling box, so
            // it holds the items off the scrollbar rather than widening the element.
            padding-bottom: prepareMediaVariable(--_ctm-lt-sh-sl-gp, 0px);
            // overflow-y: hidden;
            flex-wrap: nowrap;
          }
        }
      }

      .swatch__item:hover {
        --_sf-hr-bd-cr: var(
          --_ctm-mob-dn-on-ve-se-hr-se-bd-cr,
          var(--_ctm-tab-dn-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-on-ve-se-hr-se-bd-cr))
        );
        --_sf-hr-br-cr: var(
          --_ctm-mob-dn-on-ve-se-hr-se-br-cr,
          var(--_ctm-tab-dn-on-ve-se-hr-se-br-cr, var(--_ctm-dn-on-ve-se-hr-se-br-cr))
        );
        --_sf-hr-br-se: var(
          --_ctm-mob-dn-on-ve-se-hr-se-br-se,
          var(--_ctm-tab-dn-on-ve-se-hr-se-br-se, var(--_ctm-dn-on-ve-se-hr-se-br-se))
        );
        --_sf-hr-br-wh: var(
          --_ctm-mob-dn-on-ve-se-hr-se-br-wh,
          var(--_ctm-tab-dn-on-ve-se-hr-se-br-wh, var(--_ctm-dn-on-ve-se-hr-se-br-wh))
        );
        --_sf-hr-br-rs: var(
          --_ctm-mob-dn-on-ve-se-hr-se-br-rs,
          var(--_ctm-tab-dn-on-ve-se-hr-se-br-rs, var(--_ctm-dn-on-ve-se-hr-se-br-rs))
        );

        // for shadow
        --_sf-hr-sw-ae: var(
          --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-on-ve-se-hr-se-sw-ae))
        );
        --_sf-hr-sw-br: var(
          --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-br, var(--_ctm-dn-on-ve-se-hr-se-sw-br))
        );
        --_sf-hr-sw-hr: var(
          --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-on-ve-se-hr-se-sw-hr))
        );
        --_sf-hr-sw-cr: var(
          --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
          var(--_ctm-tab-dn-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-on-ve-se-hr-se-sw-cr))
        );

        // for font — from optionValueTextStyle.hoverState, falling back to the pre-split
        // optionValueStyle.hoverState keys.
        --_sf-hr-cr: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-cr,
            --_ctm-dn-on-ve-se-hr-se-cr
          )};
        --_sf-hr-ft-fy: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-ft-fy,
            --_ctm-dn-on-ve-se-hr-se-ft-fy
          )};
        --_sf-hr-tt-tm: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-tt-tm,
            --_ctm-dn-on-ve-se-hr-se-tt-tm
          )};
        --_sf-hr-wd-wp: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-wd-wp,
            --_ctm-dn-on-ve-se-hr-se-wd-wp
          )};
        --_sf-hr-wd-bk: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-wd-bk,
            --_ctm-dn-on-ve-se-hr-se-wd-bk
          )};
        --_sf-hr-ft-se: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-ft-se,
            --_ctm-dn-on-ve-se-hr-se-ft-se
          )};
        --_sf-hr-ft-wt: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-ft-wt,
            --_ctm-dn-on-ve-se-hr-se-ft-wt
          )};
        --_sf-hr-ft-se-ic: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-ft-se-ic,
            --_ctm-dn-on-ve-se-hr-se-ft-se-ic
          )};
        --_sf-hr-tt-an: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-tt-an,
            --_ctm-dn-on-ve-se-hr-se-tt-an
          )};
        --_sf-hr-lr-sg: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-lr-sg,
            --_ctm-dn-on-ve-se-hr-se-lr-sg
          )};
        --_sf-hr-le-ht: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-le-ht,
            --_ctm-dn-on-ve-se-hr-se-le-ht
          )};

        --_sf-hr-ue: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-hr-se-ue,
            --_ctm-dn-on-ve-se-hr-se-ue
          )};
      }
      .swatch__item[data-selected="true"] {
        --_sf-sd-bd-cr: var(
          --_ctm-mob-dn-on-ve-se-sd-se-bd-cr,
          var(--_ctm-tab-dn-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-on-ve-se-sd-se-bd-cr))
        );
        --_sf-sd-br-cr: var(
          --_ctm-mob-dn-on-ve-se-sd-se-br-cr,
          var(--_ctm-tab-dn-on-ve-se-sd-se-br-cr, var(--_ctm-dn-on-ve-se-sd-se-br-cr))
        );
        --_sf-sd-br-se: var(
          --_ctm-mob-dn-on-ve-se-sd-se-br-se,
          var(--_ctm-tab-dn-on-ve-se-sd-se-br-se, var(--_ctm-dn-on-ve-se-sd-se-br-se))
        );
        --_sf-sd-br-wh: var(
          --_ctm-mob-dn-on-ve-se-sd-se-br-wh,
          var(--_ctm-tab-dn-on-ve-se-sd-se-br-wh, var(--_ctm-dn-on-ve-se-sd-se-br-wh))
        );
        // new
        --_sf-sd-sw-ae: var(
          --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-on-ve-se-sd-se-sw-ae))
        );
        --_sf-sd-sw-br: var(
          --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-br, var(--_ctm-dn-on-ve-se-sd-se-sw-br))
        );
        --_sf-sd-sw-sd: var(
          --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-on-ve-se-sd-se-sw-sd))
        );
        --_sf-sd-sw-cr: var(
          --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
          var(--_ctm-tab-dn-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-on-ve-se-sd-se-sw-cr))
        );

        // for font — from optionValueTextStyle.selectedState, falling back to the
        // pre-split optionValueStyle.selectedState keys.
        --_sf-hr-cr: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-cr,
            --_ctm-dn-on-ve-se-sd-se-cr
          )};
        --_sf-hr-ft-fy: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-ft-fy,
            --_ctm-dn-on-ve-se-sd-se-ft-fy
          )};
        --_sf-hr-tt-tm: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-tt-tm,
            --_ctm-dn-on-ve-se-sd-se-tt-tm
          )};
        --_sf-hr-wd-wp: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-wd-wp,
            --_ctm-dn-on-ve-se-sd-se-wd-wp
          )};
        --_sf-hr-wd-bk: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-wd-bk,
            --_ctm-dn-on-ve-se-sd-se-wd-bk
          )};
        --_sf-hr-ft-se: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-ft-se,
            --_ctm-dn-on-ve-se-sd-se-ft-se
          )};
        --_sf-hr-ft-wt: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-ft-wt,
            --_ctm-dn-on-ve-se-sd-se-ft-wt
          )};
        --_sf-hr-ft-se-ic: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-ft-se-ic,
            --_ctm-dn-on-ve-se-sd-se-ft-se-ic
          )};
        --_sf-hr-tt-an: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-tt-an,
            --_ctm-dn-on-ve-se-sd-se-tt-an
          )};
        --_sf-hr-lr-sg: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-lr-sg,
            --_ctm-dn-on-ve-se-sd-se-lr-sg
          )};
        --_sf-hr-le-ht: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-le-ht,
            --_ctm-dn-on-ve-se-sd-se-le-ht
          )};

        --_sf-hr-ue: #{optionValueTextVar(
            --_ctm-dn-on-ve-tt-se-sd-se-ue,
            --_ctm-dn-on-ve-se-sd-se-ue
          )};
      }

      .swatch__item {
        text-align: center;
        overflow: hidden;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: width 0.3s ease;
        // border: 1px solid gray;
        width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
        height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);

        // A Single Select value is text, not a swatch image. `white-space: nowrap` on
        // .option__value__text keeps it on one line, but this box is fixed-size with
        // overflow:hidden, so a value wider than Swatch Item Size was clipped instead.
        // Grow to the content and keep Swatch Item Size as the floor, so short values look
        // exactly as before and only the ones that would have been cut off get wider.
        &[data-display-style="Single Select"] {
          width: auto;
          height: auto;
          min-width: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
          min-height: prepareMediaVariable(--_ctm-lt-sh-im-se, 20px);
        }

        // &[data-display-style="Swatch"] {
        //   height: prepareMediaVariable(--_ctm-lt-sh-im-se);
        //   width: prepareMediaVariable(--_ctm-lt-sh-im-se);
        // }
        // &[data-display-style="Single Select"] {
        //   // min-width: 20px;
        //   // min-height: 20px;
        //   box-sizing: content-box;
        // }

        gap: prepareMediaVariable(--_ctm-lt-im-gp);
        padding: prepareMediaVariable(--_ctm-lt-sh-im-pg);

        cursor: pointer;

        border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));

        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr));
        border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
        border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));

        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));
        & div,
        .product-select-image {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }

        &[data-background-shape="circle"] {
          border-radius: 50%;
        }
        &[data-background-shape="square"] {
          border-radius: 5px;
        }
        &[data-background-shape="capsule"] {
          &:not([data-display-style="Single Select"]) {
            --toggle-height: var(--_ctm-lt-sh-im-se);
            --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);

            width: var(--toggle-width);
            height: var(--toggle-height);
          }

          border-radius: var(--toggle-height); /* Full pill shape */
          box-sizing: border-box;
        }
        &[data-swatch-shape="circle"] {
          & div,
          .product-select-image {
            border-radius: 50%;
          }
          // border-radius: 50%;
        }
        &[data-swatch-shape="capsule"] {
          & div,
          .product-select-image {
            // border-radius: 50%;
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
          // border-radius: 50%;
        }

        &:hover {
          &[data-background-shape-hover="circle"] {
            border-radius: 50%;
          }
          &[data-background-shape-hover="square"] {
            border-radius: 5px;
          }
          &[data-background-shape-hover="capsule"] {
            --toggle-height: var(--_ctm-lt-sh-im-se);
            --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);

            width: var(--toggle-width);
            height: var(--toggle-height);

            border-radius: var(--toggle-height); /* Full pill shape */
            box-sizing: border-box;
          }

          &[data-swatch-shape-hover="circle"] {
            & div,
            .product-select-image {
              border-radius: 50%;
            }
            // border-radius: 50%;
          }
          &[data-swatch-shape-hover="capsule"] {
            & div,
            .product-select-image {
              // border-radius: 50%;
              width: 100%;
              height: 100%;
              border-radius: inherit;
            }
          }
          &[data-swatch-shape-hover="square"] {
            & div,
            .product-select-image {
              border-radius: 5px;
            }
          }
        }
        &[data-selected="true"] {
          border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-cr));

          background-color: var(
            --_sf-sd-bd-cr,
            prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-bd-cr)
          );
          border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-se));
          border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-br-wh));
          box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-ae))
            var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-br))
            var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-sd))
            var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-on-ve-se-dt-se-sw-cr));

          &[data-background-shape-selected="circle"] {
            border-radius: 50%;
          }
          &[data-background-shape-selected="square"] {
            border-radius: 5px;
          }
          &[data-background-shape-selected="capsule"] {
            --toggle-height: #{prepareMediaVariable(--_ctm-lt-sh-im-se)};
            --toggle-width: calc(#{prepareMediaVariable(--_ctm-lt-sh-im-se)} * 1.5);

            width: var(--toggle-width);
            // height: var(--toggle-height);

            border-radius: var(--toggle-height); /* Full pill shape */
            box-sizing: border-box;
          }
          &[data-swatch-shape-selected="circle"] {
            & div,
            .product-select-image {
              border-radius: 50%;
            }
          }
          &[data-swatch-shape-selected="capsule"] {
            & div,
            .product-select-image {
              // border-radius: 50%;
              width: 100%;
              height: 100%;
              border-radius: inherit;
            }
          }
          &[data-swatch-shape-selected="square"] {
            & div,
            .product-select-image {
              border-radius: 5px;
            }
          }
        }

        .option__value__text {
          color: var(
            --_sf-hr-cr,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-cr,
                --_ctm-dn-on-ve-tt-se-dt-se-cr,
                --_ctm-dn-on-ve-se-dt-se-cr
              )}
          );
          font-family: var(
            --_sf-hr-ft-fy,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-ft-fy,
                --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
                --_ctm-dn-on-ve-se-dt-se-ft-fy
              )}
          );
          text-transform: var(
            --_sf-hr-tt-tm,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-tt-tm,
                --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
                --_ctm-dn-on-ve-se-dt-se-tt-tm
              )}
          );
          word-wrap: var(
            --_sf-hr-wd-wp,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-wd-wp,
                --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
                --_ctm-dn-on-ve-se-dt-se-wd-wp
              )}
          );
          word-break: var(
            --_sf-hr-wd-bk,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-wd-bk,
                --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
                --_ctm-dn-on-ve-se-dt-se-wd-bk
              )}
          );
          font-size: var(
            --_sf-hr-ft-se,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-ft-se,
                --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
                --_ctm-dn-on-ve-se-dt-se-ft-se
              )}
          );
          font-weight: var(
            --_sf-hr-ft-wt,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-ft-wt,
                --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
                --_ctm-dn-on-ve-se-dt-se-ft-wt
              )}
          );
          font-style: var(
            --_sf-hr-ft-se-ic,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-ft-se-ic,
                --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
                --_ctm-dn-on-ve-se-dt-se-ft-se-ic
              )}
          );
          text-align: var(
            --_sf-hr-tt-an,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-tt-an,
                --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
                --_ctm-dn-on-ve-se-dt-se-tt-an
              )}
          );
          letter-spacing: var(
            --_sf-hr-lr-sg,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-lr-sg,
                --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
                --_ctm-dn-on-ve-se-dt-se-lr-sg
              )}
          );
          // The pre-split key is `le-ht-dc`; the new section is read under both spellings
          // so whichever one the converter writes resolves.
          line-height: var(
            --_sf-hr-le-ht,
            prepareMediaVariable(
              --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
              #{optionValueTextDefaultVar(
                  --_ctm-dn-on-ve-tt-se-le-ht-dc,
                  --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
                  --_ctm-dn-on-ve-se-dt-se-le-ht-dc
                )}
            )
          );
          text-decoration: var(
            --_sf-hr-ue,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-ue,
                --_ctm-dn-on-ve-tt-se-dt-se-ue,
                --_ctm-dn-on-ve-se-dt-se-ue
              )}
          );
          // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
          // broke onto a second line inside it. Keep it on one line.
          white-space: nowrap;
        }
        &.disabled {
          color: #aaa;
          background-color: #f9f9f9;
          border-color: #ddd;
          cursor: not-allowed;
          opacity: 0.3;
          overflow: hidden;
          position: relative;
        }

        .cross-line {
          position: absolute;
          inset: 0;
          background-color: #cccccc;
          clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
          pointer-events: none;
        }
      }

      // .disabled {
      //   cursor: not-allowed;
      //   opacity: 0.4;

      //   &[data-swatch-type="Swatch image"] {
      //     position: relative;
      //     overflow: hidden;
      //     &::after {
      //       content: "";
      //       width: 172%;
      //       height: 1px;
      //       position: absolute;
      //       background: #f00;
      //       left: -14px;
      //       transform: rotate(48deg);
      //       /* -webkit-transform: rotate(48deg); */
      //       -moz-transform: rotate(48deg);
      //       top: 14px;
      //       box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
      //     }
      //     &::before {
      //       content: "";
      //       width: 164%;
      //       height: 1px;
      //       position: absolute;
      //       background: #f00;
      //       left: -14px;
      //       transform: rotate(-48deg);
      //       -webkit-transform: rotate(-48deg);
      //       -moz-transform: rotate(-48deg);
      //       top: 14px;
      //       box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
      //     }
      //   }
      // }

      .option__value__text {
        color: var(
          --_sf-hr-cr,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-cr,
              --_ctm-dn-on-ve-tt-se-dt-se-cr,
              --_ctm-dn-on-ve-se-dt-se-cr
            )}
        );
        font-family: var(
          --_sf-hr-ft-fy,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-ft-fy,
              --_ctm-dn-on-ve-tt-se-dt-se-ft-fy,
              --_ctm-dn-on-ve-se-dt-se-ft-fy
            )}
        );
        text-transform: var(
          --_sf-hr-tt-tm,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-tt-tm,
              --_ctm-dn-on-ve-tt-se-dt-se-tt-tm,
              --_ctm-dn-on-ve-se-dt-se-tt-tm
            )}
        );
        word-wrap: var(
          --_sf-hr-wd-wp,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-wd-wp,
              --_ctm-dn-on-ve-tt-se-dt-se-wd-wp,
              --_ctm-dn-on-ve-se-dt-se-wd-wp
            )}
        );
        word-break: var(
          --_sf-hr-wd-bk,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-wd-bk,
              --_ctm-dn-on-ve-tt-se-dt-se-wd-bk,
              --_ctm-dn-on-ve-se-dt-se-wd-bk
            )}
        );
        font-size: var(
          --_sf-hr-ft-se,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-ft-se,
              --_ctm-dn-on-ve-tt-se-dt-se-ft-se,
              --_ctm-dn-on-ve-se-dt-se-ft-se
            )}
        );
        font-weight: var(
          --_sf-hr-ft-wt,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-ft-wt,
              --_ctm-dn-on-ve-tt-se-dt-se-ft-wt,
              --_ctm-dn-on-ve-se-dt-se-ft-wt
            )}
        );
        font-style: var(
          --_sf-hr-ft-se-ic,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-ft-se-ic,
              --_ctm-dn-on-ve-tt-se-dt-se-ft-se-ic,
              --_ctm-dn-on-ve-se-dt-se-ft-se-ic
            )}
        );
        text-align: var(
          --_sf-hr-tt-an,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-tt-an,
              --_ctm-dn-on-ve-tt-se-dt-se-tt-an,
              --_ctm-dn-on-ve-se-dt-se-tt-an
            )}
        );
        letter-spacing: var(
          --_sf-hr-lr-sg,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-lr-sg,
              --_ctm-dn-on-ve-tt-se-dt-se-lr-sg,
              --_ctm-dn-on-ve-se-dt-se-lr-sg
            )}
        );
        // The pre-split key is `le-ht-dc`; the new section is read under both spellings
        // so whichever one the converter writes resolves.
        line-height: var(
          --_sf-hr-le-ht,
          prepareMediaVariable(
            --_ctm-dn-on-ve-tt-se-dt-se-le-ht,
            #{optionValueTextDefaultVar(
                --_ctm-dn-on-ve-tt-se-le-ht-dc,
                --_ctm-dn-on-ve-tt-se-dt-se-le-ht-dc,
                --_ctm-dn-on-ve-se-dt-se-le-ht-dc
              )}
          )
        );
        text-decoration: var(
          --_sf-hr-ue,
          #{optionValueTextDefaultVar(
              --_ctm-dn-on-ve-tt-se-ue,
              --_ctm-dn-on-ve-tt-se-dt-se-ue,
              --_ctm-dn-on-ve-se-dt-se-ue
            )}
        );
        // The swatch item is a fixed box (Swatch Item Size), so a value like "Small"
        // broke onto a second line inside it. Keep it on one line.
        white-space: nowrap;
      }

      .product-select-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
      //Dropdown
      .est__dropdown__main {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(
          --_ctm-mob-lt-on-te-ve-sg,
          var(
            --_ctm-tab-lt-on-te-ve-sg,
            var(--_ctm-lt-on-te-ve-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
          )
        );
        padding: var(
          --_ctm-mob-lt-dn-dy-se-dn-os-pg,
          var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-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))
          );
          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))
          );
          text-transform: var(
            --_ctm-mob-dn-on-te-tt-tm,
            var(--_ctm-tab-dn-on-te-tt-tm, var(--_ctm-dn-on-te-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-on-te-wd-wp,
            var(--_ctm-tab-dn-on-te-wd-wp, var(--_ctm-dn-on-te-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-on-te-wd-bk,
            var(--_ctm-tab-dn-on-te-wd-bk, var(--_ctm-dn-on-te-wd-bk))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          color: var(
            --_ctm-mob-dn-on-te-cr,
            var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
          );
          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))
          );
          text-decoration: var(
            --_ctm-mob-dn-on-te-ue,
            var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
          );
          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))
          );
          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))
          );
          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))
          );
          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;
          width: 100%;
          .value__selected {
            width: 100%;
          }

          &.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))
            );
          }

          .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(--_tst-dn-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(--_tst-dn-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(--_tst-dn-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, var(--_tst-dn-sw-cr)))
                )
            );
            position: absolute;
            top: 100%;
            left: 0;
            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;
            }

            .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;

              &:hover {
                background-color: var(--_primary-25);
                color: var(--_primary-400);
              }

              &.disabled {
                cursor: not-allowed;
                opacity: 0.4;
              }
            }
          }
        }
      }

      // variant dropdown selection
      .var__drop__selection {
        display: flex;
        width: 100%;
        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, var(--_ctm-lt-im-sg))
          )
        );

        flex-direction: row;
        &[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)));
        }
        .dropdown_wrapper {
          position: relative;
          &[data-show-divider="true"] {
            &:not(:last-child)::after {
              content: "";
              position: relative;
              background-color: #000;
              height: 1px;
              width: 100%;
              display: flex;
              top: calc(
                calc(
                    var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 8px
                  ) /
                  2
              );
            }
          }

          &[data-show-item-divider="true"] {
            .est__dropdown__main {
              .est__dropdown {
                .list {
                  :not(:last-child).list__option {
                    &::after {
                      content: "";
                      position: relative;
                      background-color: #000;
                      height: 1px;
                      width: 100%;
                      display: flex;
                      top: calc(
                        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)
                            )
                          ) /
                          2
                      );
                    }
                  }
                }
              }
            }
          }
        }
        & > div {
          width: 100%;
        }
      }
      .embla {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;

        // overflow: hidden;

        .embla__viewport {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          flex-direction: column;

          overflow: hidden;

          .embla__container {
            width: 100%;
            height: 100%;
            display: flex;
            grid-template-rows: 100%;
            // grid-template-columns: 100%;
            // grid-template-columns: repeat(
            //   var(--_ctm-lt-is-pr-se),
            //   calc(100% / var(--_ctm-lt-is-pr-se))
            // );
            // grid-auto-flow: column;
            gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));

            &[data-control-type="Bottom"][data-slider-control="Arrows"] {
              height: calc(
                100% - calc(
                    var(
                        --_ctm-mob-dn-pn-as-aw-se,
                        var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
                      ) +
                      8px
                  )
              );
            }
            &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
              height: calc(
                100% - calc(
                    var(
                        --_ctm-mob-dn-pn-le-le-ht,
                        var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
                      ) +
                      20px
                  )
              );
            }
            &[data-control-type="Bottom"][data-slider-control="Dots"] {
              height: calc(
                100% - calc(
                    var(
                        --_ctm-mob-dn-pn-ds-dt-se,
                        var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
                      ) +
                      20px
                  )
              );
            }

            .embla__slide {
              // width: 100%;
              height: 100%;
            }
          }
        }

        .arrow-navigation {
          display: flex;
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          justify-content: space-between;
          transform: translate(-50%, -50%);
          //   padding-left: 20px;
          &[data-control-type="Side"] {
            .left-button,
            .right-button {
              background-color: transparent;
            }
          }
          &[data-background-shape="Round"] {
            .left-button,
            .right-button {
              background-color: #f2f5f5;
              box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
            }
          }
          &[data-control-type="Bottom-Overflow"] {
            transform: translateX(-50%);
            width: 100%;
            justify-content: center;
            gap: 12px;
            top: unset;
            bottom: 6px;
          }
          &[data-control-type="Bottom"] {
            transform: unset;
            position: static;
            width: 100%;
            justify-content: center;
            gap: 12px;
            margin-top: 10px;
          }
          .left-button {
            padding: 10px;
            border-radius: 50%;
            border: none;
            width: var(
              --_ctm-mob-dn-pn-as-aw-se,
              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
            );
            height: var(
              --_ctm-mob-dn-pn-as-aw-se,
              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
            );

            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            outline: none;
            margin-left: 12px;
            &:disabled {
              & svg {
                path {
                  stroke: rgb(192, 192, 192);
                }
              }
            }
          }
          .right-button {
            border-radius: 50%;
            border: none;
            width: var(
              --_ctm-mob-dn-pn-as-aw-se,
              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
            );
            height: var(
              --_ctm-mob-dn-pn-as-aw-se,
              var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
            );

            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            outline: none;
            margin-right: 12px;
            padding: 10px;

            &:disabled {
              & svg {
                path {
                  stroke: rgb(192, 192, 192);
                }
              }
            }
          }
          .icon {
            display: flex;
            svg {
              width: calc(
                var(
                    --_ctm-mob-dn-pn-as-aw-se,
                    var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
                  ) *
                  0.5
              );
              height: calc(
                var(
                    --_ctm-mob-dn-pn-as-aw-se,
                    var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
                  ) *
                  0.5
              );
              path {
                stroke: var(
                  --_ctm-mob-dn-pn-as-aw-cr,
                  var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
                );
              }
            }
          }
        }

        &[data-thumbnail-placement="top"] {
          flex-direction: column-reverse;
        }
        &[data-thumbnail-placement="bottom"] {
          flex-direction: column;
        }
        &[data-thumbnail-placement="left"] {
          flex-direction: row-reverse;

          .embla__thumbs {
            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

            height: 100%;

            & .embla__thumbs__container {
              flex-direction: column;
              height: 100%;
            }
          }
        }
        &[data-thumbnail-placement="right"] {
          flex-direction: row;
          .embla__thumbs {
            width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

            height: 100%;

            & .embla__thumbs__container {
              flex-direction: column;
              height: 100%;
            }
          }
        }
        &[data-control-type="Side"] {
          display: flex;
          align-self: center;
          flex-direction: row;
          .left-button:disabled,
          .right-button:disabled {
            display: none;
          }
        }
        .embla__dots {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
          gap: 6px;
          margin-top: 16px;

          &[data-control-type="Bottom-Overflow"] {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 75%;
          }
          .embla__dot {
            -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
            touch-action: manipulation;
            display: inline-flex;
            text-decoration: none;
            cursor: pointer;
            border: 0;
            padding: 0;
            margin: 0;
            // width: 0.6rem;
            // height: 0.6rem;
            width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
            height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
          }
          .embla__dot:after {
            // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
            width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
            height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
            border-radius: 50%;
            display: flex;
            align-items: center;
            content: "";
          }
          .embla__dot--selected:after {
            box-shadow: inset 0 0 0 1px var(--text-body);
            background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
          }
          &[data-slider-control="Pagination Line"] {
            .embla__dot {
              width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
              height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
              background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));

              border-radius: 6px;
            }
            .embla__dot--selected:after {
              box-shadow: inset 0 0 0 1px var(--text-body);
              border-radius: 6px;
              width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
              height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
              // background-color: #fff;
              background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
            }
          }
        }

        .embla__thumbs {
          width: 100%;
          height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

          position: relative;
          display: grid;
          grid-template-columns: 1fr;
          overflow: hidden;
          // margin: 10px;
          padding: 10px;

          .embla__thumbs__viewport {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            flex-direction: column;

            overflow: hidden;
          }
          .embla__thumbs__container {
            display: flex;
            flex-direction: row;
            margin-left: calc(var(--thumbs-slide-spacing) * -1);
            gap: var(--_ctm-lt-tl-sg);
            width: 100%;
            // justify-content: center;
            // height: 200px;

            .embla__thumbs__slide {
              min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
              max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
              height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
              & img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}