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

[data-div-type="element"] {
  &[data-element-type="optionBar"] {
    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: 1 / var(--_sf-aspect-ratio);

    // --_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%;
      // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
      // gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
      // justify-content: var(--_justify-center);
      // align-items: var(--_align-center);
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    .empty__view {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .allocation__profile__tabs {
      width: 100%;
      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)));
      display: flex;
      flex-direction: column;
      --_sf-gp: var(
        --_ctm-mob-lt-im-sg,
        var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
      );
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
      row-gap: var(--_sf-gp);
      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)))
      );
      .profile__button {
        &[data-show-shadow="false"] {
          --_show-shadow: none;
        }
        &[data-icon-position="left"] {
          --_sf-fd-bn: row;
        }
        &[data-icon-position="right"] {
          --_sf-fd-bn: row-reverse;
        }
        &[data-icon-position="center"] {
          --_sf-fd-bn: row;
        }

        &:hover {
          --_sf-hr-bd-cr: var(
            --_ctm-mob-dn-tb-hr-se-bd-cr,
            var(--_ctm-tab-dn-tb-hr-se-bd-cr, var(--_ctm-dn-tb-hr-se-bd-cr))
          );
          --_sf-hr-br-cr: var(
            --_ctm-mob-dn-tb-hr-se-br-cr,
            var(--_ctm-tab-dn-tb-hr-se-br-cr, var(--_ctm-dn-tb-hr-se-br-cr))
          );
          --_sf-hr-br-se: var(
            --_ctm-mob-dn-tb-hr-se-br-se,
            var(--_ctm-tab-dn-tb-hr-se-br-se, var(--_ctm-dn-tb-hr-se-br-se))
          );
          --_sf-hr-br-wh: var(
            --_ctm-mob-dn-tb-hr-se-br-wh,
            var(--_ctm-tab-dn-tb-hr-se-br-wh, var(--_ctm-dn-tb-hr-se-br-wh))
          );
          --_sf-hr-br-rs: var(
            --_ctm-mob-dn-tb-hr-se-br-rs,
            var(--_ctm-tab-dn-tb-hr-se-br-rs, var(--_ctm-dn-tb-hr-se-br-rs))
          );
          --_sf-hr-at: var(
            --_ctm-mob-dn-tb-hr-se-at,
            var(--_ctm-tab-dn-tb-hr-se-at, var(--_ctm-dn-tb-hr-se-at))
          );
          --_sf-hr-in-ad-tt-sg: var(
            --_ctm-mob-dn-tb-hr-se-in-ad-tt-sg,
            var(--_ctm-tab-dn-tb-hr-se-in-ad-tt-sg, var(--_ctm-dn-tb-hr-se-in-ad-tt-sg))
          );

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

          // for font

          --_sf-hr-cr: var(
            --_ctm-mob-dn-tb-hr-se-cr,
            var(--_ctm-tab-dn-tb-hr-se-cr, var(--_ctm-dn-tb-hr-se-cr))
          );
          --_sf-hr-ft-fy: var(
            --_ctm-mob-dn-tb-hr-se-ft-fy,
            var(--_ctm-tab-dn-tb-hr-se-ft-fy, var(--_ctm-dn-tb-hr-se-ft-fy))
          );
          --_sf-hr-tt-tm: var(
            --_ctm-mob-dn-tb-hr-se-tt-tm,
            var(--_ctm-tab-dn-tb-hr-se-tt-tm, var(--_ctm-dn-tb-hr-se-tt-tm))
          );
          --_sf-hr-wd-wp: var(
            --_ctm-mob-dn-tb-hr-se-wd-wp,
            var(--_ctm-tab-dn-tb-hr-se-wd-wp, var(--_ctm-dn-tb-hr-se-wd-wp))
          );
          --_sf-hr-wd-bk: var(
            --_ctm-mob-dn-tb-hr-se-wd-bk,
            var(--_ctm-tab-dn-tb-hr-se-wd-bk, var(--_ctm-dn-tb-hr-se-wd-bk))
          );
          --_sf-hr-ft-se: var(
            --_ctm-mob-dn-tb-hr-se-ft-se,
            var(--_ctm-tab-dn-tb-hr-se-ft-se, var(--_ctm-dn-tb-hr-se-ft-se))
          );
          --_sf-hr-ft-wt: var(
            --_ctm-mob-dn-tb-hr-se-ft-wt,
            var(--_ctm-tab-dn-tb-hr-se-ft-wt, var(--_ctm-dn-tb-hr-se-ft-wt))
          );
          --_sf-hr-ft-se-ic: var(
            --_ctm-mob-dn-tb-hr-se-ft-se-ic,
            var(--_ctm-tab-dn-tb-hr-se-ft-se-ic, var(--_ctm-dn-tb-hr-se-ft-se-ic))
          );
          --_sf-hr-tt-an: var(
            --_ctm-mob-dn-tb-hr-se-tt-an,
            var(--_ctm-tab-dn-tb-hr-se-tt-an, var(--_ctm-dn-tb-hr-se-tt-an))
          );
          --_sf-hr-lr-sg: var(
            --_ctm-mob-dn-tb-hr-se-lr-sg,
            var(--_ctm-tab-dn-tb-hr-se-lr-sg, var(--_ctm-dn-tb-hr-se-lr-sg))
          );
          --_sf-hr-le-ht: var(
            --_ctm-mob-dn-tb-hr-se-le-ht,
            var(--_ctm-tab-dn-tb-hr-se-le-ht, var(--_ctm-dn-tb-hr-se-le-ht))
          );

          --_sf-hr-in-se: var(
            --_ctm-mob-dn-tb-hr-se-in-se,
            var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se))
          );
          --_sf-hr-in-se: var(
            --_ctm-mob-dn-tb-hr-se-in-se,
            var(--_ctm-tab-dn-tb-hr-se-in-se, var(--_ctm-dn-tb-hr-se-in-se))
          );
          --_sf-hr-in-c1: var(
            --_ctm-mob-dn-tb-hr-se-in-c1,
            var(--_ctm-tab-dn-tb-hr-se-in-c1, var(--_ctm-dn-tb-hr-se-in-c1))
          );
          --_sf-hr-ue: var(
            --_ctm-mob-dn-tb-hr-se-ue,
            var(--_ctm-tab-dn-tb-hr-se-ue, var(--_ctm-dn-tb-hr-se-ue))
          );

          // for pading and width
          --_sf-hr-pg: var(
            --_ctm-mob-dn-tb-hr-se-pg,
            var(--_ctm-tab-dn-tb-hr-se-pg, var(--_ctm-dn-tb-hr-se-pg))
          );
          --_sf-hr-wh: var(
            --_ctm-mob-dn-tb-hr-se-wh,
            var(--_ctm-tab-dn-tb-hr-se-wh, var(--_ctm-dn-tb-hr-se-wh))
          );

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
          &[data-hover-show-border="false"] {
            border: none;
          }
        }

        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-bd-cr));

        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-tb-dt-se-pg));
        display: flex;
        flex-direction: var(--_sf-fd-bn);
        align-items: center;

        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-tb-dt-se-at));
        gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-in-ad-tt-sg));

        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));

        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae))
          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br))
          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd))
          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));

        &[data-show-border="true"] {
          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));

          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-se));

          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-wh));
        }

        // text styles

        color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-cr));

        font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-fy));
        text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
        word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
        word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
        &.flex__overflow {
          white-space: normal;
          @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
        }

        font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se));

        font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-wt));

        font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se-ic));

        text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-an));

        letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-lr-sg));

        line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-tb-dt-se-le-ht));

        text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

        [data-element-style="Text"] {
          display: inline-block;
          width: 100%;
        }

        &[data-is-selected="true"] {
          --_sf-sd-bd-cr: var(
            --_ctm-mob-dn-me-sd-se-bd-cr,
            var(--_ctm-tab-dn-tb-sd-se-bd-cr, var(--_ctm-dn-tb-sd-se-bd-cr))
          );
          --_sf-sd-br-cr: var(
            --_ctm-mob-dn-tb-sd-se-br-cr,
            var(--_ctm-tab-dn-tb-sd-se-br-cr, var(--_ctm-dn-tb-sd-se-br-cr))
          );
          --_sf-sd-br-se: var(
            --_ctm-mob-dn-tb-sd-se-br-se,
            var(--_ctm-tab-dn-tb-sd-se-br-se, var(--_ctm-dn-tb-sd-se-br-se))
          );
          --_sf-sd-br-wh: var(
            --_ctm-mob-dn-tb-sd-se-br-wh,
            var(--_ctm-tab-dn-tb-sd-se-br-wh, var(--_ctm-dn-tb-sd-se-br-wh))
          );
          --_sf-sd-br-rs: var(
            --_ctm-mob-dn-tb-sd-se-br-rs,
            var(--_ctm-tab-dn-tb-sd-se-br-rs, var(--_ctm-dn-tb-sd-se-br-rs))
          );
          --_sf-sd-at: var(
            --_ctm-mob-dn-tb-sd-se-at,
            var(--_ctm-tab-dn-tb-sd-se-at, var(--_ctm-dn-tb-sd-se-at))
          );
          --_sf-sd-in-ad-tt-sg: var(
            --_ctm-mob-dn-tb-sd-se-in-ad-tt-sg,
            var(--_ctm-tab-dn-tb-sd-se-in-ad-tt-sg, var(--_ctm-dn-tb-sd-se-in-ad-tt-sg))
          );

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

          // for font

          --_sf-sd-cr: var(
            --_ctm-mob-dn-tb-sd-se-cr,
            var(--_ctm-tab-dn-tb-sd-se-cr, var(--_ctm-dn-tb-sd-se-cr))
          );
          --_sf-sd-ft-fy: var(
            --_ctm-mob-dn-tb-sd-se-ft-fy,
            var(--_ctm-tab-dn-tb-sd-se-ft-fy, var(--_ctm-dn-tb-sd-se-ft-fy))
          );
          --_sf-sd-tt-tm: var(
            --_ctm-mob-dn-tb-sd-se-tt-tm,
            var(--_ctm-tab-dn-tb-sd-se-tt-tm, var(--_ctm-dn-tb-sd-se-tt-tm))
          );
          --_sf-sd-wd-wp: var(
            --_ctm-mob-dn-tb-sd-se-wd-wp,
            var(--_ctm-tab-dn-tb-sd-se-wd-wp, var(--_ctm-dn-tb-sd-se-wd-wp))
          );
          --_sf-sd-wd-bk: var(
            --_ctm-mob-dn-tb-sd-se-wd-bk,
            var(--_ctm-tab-dn-tb-sd-se-wd-bk, var(--_ctm-dn-tb-sd-se-wd-bk))
          );
          --_sf-sd-ft-se: var(
            --_ctm-mob-dn-tb-sd-se-ft-se,
            var(--_ctm-tab-dn-tb-sd-se-ft-se, var(--_ctm-dn-tb-sd-se-ft-se))
          );
          --_sf-sd-ft-wt: var(
            --_ctm-mob-dn-tb-sd-se-ft-wt,
            var(--_ctm-tab-dn-tb-sd-se-ft-wt, var(--_ctm-dn-tb-sd-se-ft-wt))
          );
          --_sf-sd-ft-se-ic: var(
            --_ctm-mob-dn-tb-sd-se-ft-se-ic,
            var(--_ctm-tab-dn-tb-sd-se-ft-se-ic, var(--_ctm-dn-tb-sd-se-ft-se-ic))
          );
          --_sf-sd-tt-an: var(
            --_ctm-mob-dn-tb-sd-se-tt-an,
            var(--_ctm-tab-dn-tb-sd-se-tt-an, var(--_ctm-dn-tb-sd-se-tt-an))
          );
          --_sf-sd-lr-sg: var(
            --_ctm-mob-dn-tb-sd-se-lr-sg,
            var(--_ctm-tab-dn-tb-sd-se-lr-sg, var(--_ctm-dn-tb-sd-se-lr-sg))
          );
          --_sf-sd-le-ht: var(
            --_ctm-mob-dn-tb-sd-se-le-ht,
            var(--_ctm-tab-dn-tb-sd-se-le-ht, var(--_ctm-dn-tb-sd-se-le-ht))
          );

          --_sf-sd-in-se: var(
            --_ctm-mob-dn-tb-sd-se-in-se,
            var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se))
          );
          --_sf-sd-in-se: var(
            --_ctm-mob-dn-tb-sd-se-in-se,
            var(--_ctm-tab-dn-tb-sd-se-in-se, var(--_ctm-dn-tb-sd-se-in-se))
          );
          --_sf-sd-in-c1: var(
            --_ctm-mob-dn-tb-sd-se-in-c1,
            var(--_ctm-tab-dn-tb-sd-se-in-c1, var(--_ctm-dn-tb-sd-se-in-c1))
          );
          --_sf-sd-ue: var(
            --_ctm-mob-dn-tb-hr-ue,
            var(--_ctm-tab-dn-tb-hr-ue, var(--_ctm-dn-tb-hr-ue))
          );

          // for pading and width
          --_sf-sd-pg: var(
            --_ctm-mob-dn-tb-sd-se-pg,
            var(--_ctm-tab-dn-tb-sd-se-pg, var(--_ctm-dn-tb-sd-se-pg))
          );
          --_sf-sd-wh: var(
            --_ctm-mob-dn-tb-sd-se-wh,
            var(--_ctm-tab-dn-tb-sd-se-wh, var(--_ctm-dn-tb-sd-se-wh))
          );

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }

          background-color: var(--_sf-sd-bd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-bd-cr));

          padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-tb-dt-se-pg));
          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-tb-dt-se-at));
          gap: var(--_sf-sd-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-in-ad-tt-sg));

          border-radius: var(--_sf-sd-br-rs, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-rs));

          box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-ae))
            var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-br))
            var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-sd))
            var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-sw-cr));

          &[data-show-border="true"] {
            border-color: var(--_sf-sd-br-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-cr));

            border-style: var(--_sf-sd-br-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-se));

            border-width: var(--_sf-sd-br-wh, prepareMediaVariable(--_ctm-dn-tb-dt-se-br-wh));
          }

          // text styles

          color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-tb-dt-se-cr));

          font-family: var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-fy));
          text-transform: var(--_sf-sd-tt-tm, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-tm));
          word-wrap: var(--_sf-sd-wd-wp, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-wp));
          word-break: var(--_sf-sd-wd-bk, prepareMediaVariable(--_ctm-dn-tb-dt-se-wd-bk));
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }

          font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se));

          font-weight: var(--_sf-sd-ft-wt, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-wt));

          font-style: var(--_sf-sd-ft-se-ic, prepareMediaVariable(--_ctm-dn-tb-dt-se-ft-se-ic));

          text-align: var(--_sf-sd-tt-an, prepareMediaVariable(--_ctm-dn-tb-dt-se-tt-an));

          letter-spacing: var(--_sf-sd-lr-sg, prepareMediaVariable(--_ctm-dn-tb-dt-se-lr-sg));

          line-height: var(--_sf-sd-le-ht, prepareMediaVariable(--_ctm-dn-tb-dt-se-le-ht));

          text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));

          [data-element-style="Text"] {
            display: inline-block;
            width: 100%;
          }
        }
      }
      .embla {
        height: auto;
        .embla__viewport {
          .embla__container {
            display: flex;
            gap: prepareMediaVariable(--_ctm-dn-tb-dt-se-im-gp);
            .embla__slide {
              width: unset;
            }
          }
        }
      }
    }
    .embla {
      width: 100%;
      height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 10px;
      // overflow: hidden;

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

        overflow: hidden;

        .embla__container {
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-rows: 100%;

          grid-template-columns: repeat(
            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
            calc(
              100% /
                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
            )
          );

          grid-auto-flow: column;
          gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));

          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
            height: calc(100% - calc(50px + 10px));
          }

          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
            height: calc(100% - calc(50px + 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%;
            & > img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      &:not([data-display-style="Column"]) {
        .embla__container {
          grid-auto-columns: calc(
            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
          );
        }
      }

      .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="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;
        }
      }
      &[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);
        }
      }
      .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: #c3b7b7;
            }
          }
        }
      }
      .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: #c3b7b7;
            }
          }
        }
      }
      .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: #514949;
          }
        }
      }

      &[data-control-type="Side"] {
        .embla__viewport {
          width: calc(100% - 85px);
          margin-inline: auto;
        }
        .left-button {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .right-button {
          position: absolute;

          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      &[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-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%;
          }
        }
      }
      .embla__dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
        gap: 6px;

        &[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-mob-dn-pn-ds-or-dt-cr,
            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-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-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
          );
          height: var(
            --_ctm-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-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-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
          );
          height: var(
            --_ctm-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-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-mob-dn-pn-ds-ct-dt-cr,
            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
          );
        }
        &[data-slider-control="Pagination Line"] {
          .embla__dot {
            width: var(
              --_ctm-mob-dn-pn-le-le-wh,
              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
            );
            height: var(
              --_ctm-mob-dn-pn-le-le-ht,
              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
            );
            background-color: var(
              --_ctm-mob-dn-pn-le-or-le-cr,
              var(--_ctm-tab-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-mob-dn-pn-le-le-wh,
              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
            );
            height: var(
              --_ctm-mob-dn-pn-le-le-ht,
              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
            );
            background-color: var(
              --_ctm-mob-dn-pn-le-ct-le-cr,
              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-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-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, 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%;
            }
          }
        }
      }
    }
  }
}