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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="allocations"] {
    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)));

    & > div {
      &.wrapper {
        width: 100%;
        // min-width: 400px;
        // max-width: 700px;
        width: 100%;
        height: prepareMediaVariable(--_ctm-lt-ht);
      }
    }

    .loading__container {
      width: 100%;
      height: 25vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .allocations__element {
      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)))
      );

      &[data-divider-show="true"] {
        --_sf-dvdr: var(
            --_ctm-mob-dn-dr-dr-wh,
            var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
          )
          var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
          var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
        --_sf-dvdr-gap: var(--_sf-gp);
      }
      &[data-icon-position="Left"] {
        --_sf-fd: row-reverse;
        --_sf-jc: flex-end;
      }
      &[data-show-icon="false"] {
        --_sf-show-icon-ff: none;
      }
      &[data-divider-show="true"] {
        // .accordion-item:not(:last-child) {
        //   border-bottom: var(
        //       --_ctm-mob-dn-dr-dr-wh,
        //       var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
        //     )
        //     var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
        //     var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
        // }
      }

      .load__more__button__container {
        display: flex;
        width: 100%;
        margin-top: 10px;
        &:hover {
          --_sf-hr-bn-at: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
          );
        }

        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
      }

      .btn__with__text[data-btn-name="redeemButton"] {
        &[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-rm-bn-hr-se-bd-cr,
            var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
          );
          --_sf-hr-br-cr: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-cr,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
          );
          --_sf-hr-br-se: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-se,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
          );
          --_sf-hr-br-wh: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-wh,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
          );
          --_sf-hr-br-rs: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-rs,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
          );
          --_sf-hr-at: var(
            --_ctm-mob-dn-rm-bn-hr-se-at,
            var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
          );
          --_sf-hr-gp: var(
            --_ctm-mob-dn-rm-bn-hr-se-gp,
            var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
          );

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

          // for font

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

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

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

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
        }
        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-bd-cr));

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

        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-at));
        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-gp));

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

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

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

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

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

        .txt {
          display: flex;

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

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-ft-fy));
          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-tt-tm));
          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-wd-wp));
          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-rm-bn-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-rm-bn-dt-se-ft-se));

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

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

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

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

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

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

        .icon {
          display: var(--_hover-show-icon, var(--_show-icon, flex));
          svg {
            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));
            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-se));

            path {
              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-in-c1));
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-rm-bn-dt-se-se-wh, 1.25);
            }
          }
        }
        [data-element-style="Text"] {
          display: inline-block;
          width: 100%;
        }

        .icon--hover {
          // position: absolute;
          // inset: 0;
          // opacity: 0;
          display: none;
          transition: opacity 0.2s ease;
        }

        &:hover .icon--hover {
          // opacity: 1;
          display: flex;
        }

        &:hover .icon--default {
          // opacity: 0;
          display: none;
        }
      }
    }

    .allocations_table_wrapper {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      align-items: center;
      width: 100%;
      .table__wrapper,
      .table__container {
        // overflow: visible !important;
        overflow-x: auto;
        scrollbar-width: none;
      }
      thead th {
        overflow: visible;
        position: relative;
      }
      .est__dropdown__main {
        z-index: var(--_higher-zIndex, 10);
      }
      .table__common_parent {
        // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
        width: 100%;

        // aspect-ratio: 1 / var(--_sf-aspect-ratio);
        // --_aspect-ratio: calc(
        //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
        // );

        .pagination:hover {
          --_sf-bd-cr: var(--_ctm-dn-pn-hr-se-bd-cr, var(--_tst-dn-pn-hr-se-bd-cr));
        }

        .pagination .active:hover {
          cursor: pointer;
          --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
          --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
          --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
          --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
          --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
          --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
          --_sf-hr-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
          --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
          --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
          --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
          --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
          --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
        }
        &[data-widget-shadow="false"] {
          .table__wrapper {
            --_show-shadow: none;
          }
        }
        &[data-widget-border="true"] {
          .table__wrapper {
            border-color: var(
              --_ctm-mob-dn-te-wt-br-cr,
              var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
            );
            border-style: var(
              --_ctm-mob-dn-te-wt-br-se,
              var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-te-wt-br-wh,
              var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
            );
          }
        }
        &[data-table-shadow="false"] {
          .table__container {
            --_show-table-shadow: none;
          }
        }
        &[data-table-border="true"] {
          .table__container {
            border-color: var(
              --_ctm-mob-dn-te-br-cr,
              var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
            );
            border-style: var(
              --_ctm-mob-dn-te-br-se,
              var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-te-br-wh,
              var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
            );
          }
        }

        &[data-header-divider="true"] {
          thead tr th {
            border-bottom: 1px solid
              var(
                --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
                var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
              );
          }
        }
        &[data-row-divider="true"] {
          tbody tr {
            border-bottom: 1px solid
              var(
                --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
                var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
              );
          }
        }
        &[data-column-divider="true"] {
          tbody tr td,
          thead tr th {
            border-right: 1px solid
              var(
                --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
                var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
              );
          }

          tbody tr td:last-child,
          thead tr th:last-child {
            border-right: none;
          }
        }
        &[data-show-more-rows="onScroll"] {
          .table__container {
            overflow-y: scroll;
            height: var(
              --_ctm-mob-lt-te-ht,
              var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
            ) !important;

            &::-webkit-scrollbar {
              width: var(
                --_ctm-mob-dn-sl-br-sl-br-wh,
                var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
              );
            }

            &::-webkit-scrollbar-track {
              background-color: var(--_base-white);
            }

            &::-webkit-scrollbar-thumb {
              background-color: var(
                --_ctm-mob-dn-sl-br-sl-br-cr,
                var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
              );
            }

            // // Scrollbar thumb when hovered
            // &::-webkit-scrollbar-thumb:hover {
            //   background-color: #555; // Darker color when hovering over the thumb
            // }

            // // For Firefox, using scrollbar-width and scrollbar-color
            // scrollbar-width: thin; // Thin scrollbar
            // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
          }
        }

        &[data-alternative-row-colors="true"] {
          tbody .tbody__row__divider:nth-child(odd) {
            background-color: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
          }
        }
        .table__wrapper {
          flex: 1 1 auto;
          min-width: 0;
          overflow-x: auto;
          padding: var(
            --_ctm-mob-lt-pg,
            var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
          );

          background-color: var(
            --_ctm-mob-dn-te-wt-bd-cr,
            var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
          );

          border-radius: var(
            --_ctm-mob-dn-te-wt-br-rs,
            var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
          );

          box-shadow: var(
            --_show-shadow,
            var(
                --_ctm-mob-dn-te-wt-sw-ae,
                var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae))
              )
              var(
                --_ctm-mob-dn-te-wt-sw-br,
                var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
              )
              var(
                --_ctm-mob-dn-te-wt-sw-sd,
                var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
              )
              var(
                --_ctm-mob-dn-te-wt-sw-cr,
                var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
              )
          );

          width: 100%;

          .table__container {
            background-color: var(
              --_ctm-mob-dn-te-bd-cr,
              var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
            );

            border-radius: var(
              --_ctm-mob-dn-te-br-rs,
              var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
            );

            box-shadow: var(
              --_show-table-shadow,
              var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
                var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
                var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
                var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
            );
          }

          h3 {
            text-align: center;
            width: 100%;
            margin-bottom: 10px;
          }
          table {
            border-collapse: collapse;
            // border: none;
            width: 100%;
            // height: 100%;
            text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
            width: max-content;
            min-width: 100%;
            table-layout: auto;
            th,
            td {
              border: none;
            }
            thead {
              background-color: var(
                --_ctm-mob-dn-te-hr-bd-cr,
                var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
              );

              .thead__row__divider {
                height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));

                .th__col__divider {
                  padding: var(
                    --_ctm-mob-lt-hr-cl-pg,
                    var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
                  );

                  color: var(
                    --_ctm-mob-dn-hr-tt-cr,
                    var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
                  );

                  font-family: var(
                    --_ctm-mob-dn-hr-tt-ft-fy,
                    var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
                  );

                  font-size: var(
                    --_ctm-mob-dn-hr-tt-ft-se,
                    var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
                  );

                  font-weight: var(
                    --_ctm-mob-dn-hr-tt-ft-wt,
                    var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
                  );

                  text-decoration: var(
                    --_ctm-mob-dn-hr-tt-ue,
                    var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
                  );

                  font-style: var(
                    --_ctm-mob-dn-hr-tt-ft-se-ic,
                    var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
                  );

                  text-align: var(
                    --_ctm-mob-dn-hr-tt-tt-an,
                    var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
                  );

                  letter-spacing: var(
                    --_ctm-mob-dn-hr-tt-lr-sg,
                    var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
                  );

                  line-height: var(
                    --_ctm-mob-dn-hr-tt-le-ht,
                    var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
                  );

                  // Header Text > Text Transform and the word wrap/break pair that the
                  // typography panel renders alongside it.
                  text-transform: prepareMediaVariable(--_ctm-dn-hr-tt-tt-tm, none);
                  word-wrap: prepareMediaVariable(--_ctm-dn-hr-tt-wd-wp, normal);
                  word-break: prepareMediaVariable(--_ctm-dn-hr-tt-wd-bk, normal);

                  // Header Text > Text Overflow. The renderer adds the class and
                  // publishes the line count, since the control is `controls`.
                  &.flex__overflow {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: var(--_sf-line-clamp, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }

                  &:has(.est__dropdown__main) {
                    max-width: 200px;
                  }
                }
              }
            }
            tbody {
              .tbody__row__divider {
                // Set by CommonTable only when the caller passed onRowClick.
                // The cells carry it too: a <td> establishes its own cursor context,
                // so the pointer would stop at the row padding otherwise.
                &[data-is-clickable="true"] {
                  cursor: pointer;

                  .td__col__divider,
                  .td__col__divider * {
                    cursor: pointer;
                  }
                }

                background-color: var(
                  --_ctm-mob-dn-te-rw-bd-cr,
                  var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
                );

                // Table Row > Hover Background. Falls back to the default background
                // so a row that has no hover colour set does not go transparent.
                &:hover {
                  background-color: var(
                    --_ctm-mob-dn-te-rw-bd-cr-hr,
                    var(
                      --_ctm-tab-dn-te-rw-bd-cr-hr,
                      var(
                        --_ctm-dn-te-rw-bd-cr-hr,
                        var(
                          --_ctm-mob-dn-te-rw-bd-cr,
                          var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
                        )
                      )
                    )
                  );
                }

                height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));

                .td__col__divider {
                  padding: var(
                    --_ctm-mob-lt-rw-cl-pg,
                    var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
                  );

                  color: var(
                    --_sf-hr-fc,
                    var(
                      --_ctm-mob-dn-rw-tt-cr,
                      var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
                    )
                  );

                  font-family: var(
                    --_sf-hr-ff,
                    var(
                      --_ctm-mob-dn-rw-tt-ft-fy,
                      var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
                    )
                  );
                  text-transform: var(
                    --_sf-hr-tt-tm,
                    var(
                      --_ctm-mob-dn-rw-tt-tt-tm,
                      var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))
                    )
                  );
                  word-wrap: var(
                    --_sf-hr-wd-wp,
                    var(
                      --_ctm-mob-dn-rw-tt-wd-wp,
                      var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))
                    )
                  );
                  word-break: var(
                    --_sf-hr-wd-bk,
                    var(
                      --_ctm-mob-dn-rw-tt-wd-bk,
                      var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))
                    )
                  );

                  font-size: var(
                    --_sf-hr-fs,
                    var(
                      --_ctm-mob-dn-rw-tt-ft-se,
                      var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
                    )
                  );

                  text-decoration: var(
                    --_ctm-mob-dn-rw-tt-ue,
                    var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
                  );

                  font-weight: var(
                    --_sf-hr-fw,
                    var(
                      --_ctm-mob-dn-rw-tt-ft-wt,
                      var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
                    )
                  );

                  font-style: var(
                    --_sf-hr-ft,
                    var(
                      --_ctm-mob-dn-rw-tt-ft-se-ic,
                      var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
                    )
                  );

                  text-align: var(
                    --_sf-hr-ta,
                    var(
                      --_ctm-mob-dn-rw-tt-tt-an,
                      var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
                    )
                  );

                  letter-spacing: var(
                    --_sf-hr-ls,
                    var(
                      --_ctm-mob-dn-rw-tt-lr-sg,
                      var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
                    )
                  );

                  line-height: var(
                    --_sf-hr-lh,
                    var(
                      --_ctm-mob-dn-rw-tt-le-ht,
                      var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
                    )
                  );
                }
              }
            }
          }

          .pagination {
            display: var(--_d-flex);
            align-items: var(--_align-center);
            justify-content: var(
              --_ctm-mob-lt-pn-at,
              var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
            );
            margin-top: 10px;
            background-color: var(
              --_sf-bd-cr,
              var(
                --_ctm-mob-dn-pn-dt-se-bd-cr,
                var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
              )
            );
            &.pagination__center {
              justify-content: var(justify-center);
            }

            // Border, radius and shadow for the pagination bar. None of these existed,
            // so the panel's new controls had nothing to paint.
            border-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr);
            border-style: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none);
            border-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0);
            border-radius: prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0);
            box-shadow: var(
              --_show-shadow,
              prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-ae, 0)
                prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-br, 0)
                prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-sd, 0)
                prepareMediaVariable(--_ctm-dn-pn-dt-se-sw-cr, transparent)
            );

            &:hover {
              background-color: var(
                --_sf-bd-cr,
                prepareMediaVariable(
                  --_ctm-dn-pn-hr-se-bd-cr,
                  prepareMediaVariable(--_ctm-dn-pn-dt-se-bd-cr)
                )
              );
              border-color: prepareMediaVariable(
                --_ctm-dn-pn-hr-se-br-cr,
                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-cr)
              );
              border-style: prepareMediaVariable(
                --_ctm-dn-pn-hr-se-br-se,
                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-se, none)
              );
              border-width: prepareMediaVariable(
                --_ctm-dn-pn-hr-se-br-wh,
                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-wh, 0)
              );
              border-radius: prepareMediaVariable(
                --_ctm-dn-pn-hr-se-br-rs,
                prepareMediaVariable(--_ctm-dn-pn-dt-se-br-rs, 0)
              );
              box-shadow: var(
                --_show-shadow,
                prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-ae, 0)
                  prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-br, 0)
                  prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-sd, 0)
                  prepareMediaVariable(--_ctm-dn-pn-hr-se-sw-cr, transparent)
              );
            }

            button {
              // Default glyph shows, hover glyph waits. Both are in the DOM so the
              // swap costs no re-render; when no hover icon is picked the renderer
              // falls back to the default one, so the pair looks identical.
              .pagination__icon {
                display: flex;

                &--hover {
                  display: none;
                }
              }

              &:hover {
                .pagination__icon {
                  display: none;

                  &--hover {
                    display: flex;
                  }
                }
              }

              svg {
                // Icon Size and Icon Color live on the pagination section's states, so
                // the variables carry a `dt-se` / `hr-se` segment. These read
                // `--_ctm-dn-pn-in-*` — a path nothing writes — and the svg itself was
                // pinned to a hardcoded 18px and grey, so neither control did anything.
                width: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
                height: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px);
                path {
                  stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500));
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-pn-dt-se-se-wh, 1.25);
                }
              }

              &:hover svg {
                width: prepareMediaVariable(
                  --_ctm-dn-pn-hr-se-in-se,
                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
                );
                height: prepareMediaVariable(
                  --_ctm-dn-pn-hr-se-in-se,
                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se, 18px)
                );
                path {
                  stroke: prepareMediaVariable(
                    --_ctm-dn-pn-hr-se-in-c1,
                    prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1, var(--_gray-500))
                  );
                }
              }
            }
            span {
              float: left;
              padding: var(--_pd-8) var(--_pd-16);
              text-decoration: none;
              span {
                // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
                // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
                // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),

                // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
                // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
                // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
                // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
                // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
              }
              &.active:hover {
                &hover {
                  --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
                  --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
                  --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
                  --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
                  --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
                  --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
                  --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
                  --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
                  --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
                  --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
                  --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
                }
              }
              &.active {
                color: var(
                  --_sf-hr-fc,
                  var(
                    --_ctm-mob-dn-pn-dt-se-cr,
                    var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
                  )
                );

                font-family: var(
                  --_sf-hr-ff,
                  var(
                    --_ctm-mob-dn-pn-dt-se-ft-fy,
                    var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
                  )
                );
                text-transform: var(
                  --_sf-hr-tt-tm,
                  var(
                    --_ctm-mob-dn-pn-dt-se-tt-tm,
                    var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))
                  )
                );
                word-wrap: var(
                  --_sf-hr-wd-wp,
                  var(
                    --_ctm-mob-dn-pn-dt-se-wd-wp,
                    var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))
                  )
                );
                word-break: var(
                  --_sf-hr-wd-bk,
                  var(
                    --_ctm-mob-dn-pn-dt-se-wd-bk,
                    var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))
                  )
                );

                font-size: var(
                  --_sf-hr-fs,
                  var(
                    --_ctm-mob-dn-pn-dt-se-ft-se,
                    var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
                  )
                );

                text-decoration: var(
                  --_sf-hr-td,
                  var(
                    --_ctm-mob-dn-pn-dt-se-ue,
                    var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
                  )
                );

                font-weight: var(
                  --_sf-hr-fw,
                  var(
                    --_ctm-mob-dn-pn-dt-se-ft-wt,
                    var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
                  )
                );

                font-style: var(
                  --_sf-hr-ft,
                  var(
                    --_ctm-mob-dn-pn-dt-se-ft-se-ic,
                    var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
                  )
                );

                text-align: var(
                  --_sf-hr-ta,
                  var(
                    --_ctm-mob-dn-pn-dt-se-tt-an,
                    var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
                  )
                );

                letter-spacing: var(
                  --_sf-hr-ls,
                  var(
                    --_ctm-mob-dn-pn-dt-se-lr-sg,
                    var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
                  )
                );

                line-height: var(
                  --_sf-hr-lh,
                  var(
                    --_ctm-mob-dn-pn-dt-se-le-ht,
                    var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
                  )
                );
              }
            }
            // Same wrong path as the svg rule above: the icon variables carry the
            // section's state segment. Only the "next" button has this class in the
            // markup, so the svg rules are what actually style both arrows — these are
            // kept for the text colour they contribute.
            .pagination__arrows {
              color: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1);
              font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se);

              &:hover {
                color: prepareMediaVariable(
                  --_ctm-dn-pn-hr-se-in-c1,
                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-c1)
                );
                font-size: prepareMediaVariable(
                  --_ctm-dn-pn-hr-se-in-se,
                  prepareMediaVariable(--_ctm-dn-pn-dt-se-in-se)
                );
              }
            }
          }
        }
      }

      .no__data__found {
        color: var(--_gray-600);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        padding: 16px 24px;
        text-align: center;
      }

      .note_wrapper {
        display: flex;
        width: 100%;
        padding: 0px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;

        min-height: 76px;

        .note {
          // color: var(--_gray-600);
          // font-weight: 400;
          // line-height: 24px;
          width: 100%;
          &:nth-of-type(1) {
            color: prepareMediaVariable(--_ctm-dn-te-cr);
            font-family: prepareMediaVariable(--_ctm-dn-te-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-te-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-te-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-te-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-te-ft-se);
            font-weight: prepareMediaVariable(--_ctm-dn-te-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-te-ft-se-ic);
            text-align: prepareMediaVariable(--_ctm-dn-te-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-te-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-te-le-ht);
            text-decoration: prepareMediaVariable(--_ctm-dn-te-ue);
          }
          &:nth-of-type(2) {
            color: prepareMediaVariable(--_ctm-dn-dn-cr);
            font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-dn-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-dn-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-dn-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
            font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
            text-align: prepareMediaVariable(--_ctm-dn-dn-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-dn-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-dn-le-ht);
            text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
          }
        }

        .redeem_now_wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 24px;

          .redeem_now_btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            color: var(--_primary-400);
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;

            &[data-has-link="true"] {
              cursor: pointer;
            }

            &:hover {
              color: #53389e;
            }

            &:focus {
              color: #162578;
            }

            &:disabled {
              color: #d0d5dd;
            }
          }
        }
      }
      .btn__with__text[data-btn-name="loadMore"] {
        &[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-ld-me-bn-hr-se-bd-cr,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
          );
          --_sf-hr-br-cr: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
          );
          --_sf-hr-br-se: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
          );
          --_sf-hr-br-wh: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
          );
          --_sf-hr-br-rs: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
          );
          --_sf-hr-at: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-at,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
          );
          --_sf-hr-gp: var(
            --_ctm-mob-dn-ld-me-bn-hr-se-gp,
            var(--_ctm-tab-dn-ld-me-bn-hr-se-gp, var(--_ctm-dn-ld-me-bn-hr-se-gp))
          );

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

          // for font

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

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

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

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
        }
        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));

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

        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-gp));

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

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

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

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

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

        .txt {
          display: flex;

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

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy));
          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-tm));
          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wd-wp));
          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ld-me-bn-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-ld-me-bn-dt-se-ft-se));

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

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

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

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

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

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

        .icon {
          display: var(--_hover-show-icon, var(--_show-icon, flex));
          svg {
            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));

            path {
              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-se-wh, 1.25);
            }
          }
        }
        [data-element-style="Text"] {
          display: inline-block;
          width: 100%;
        }

        .icon--hover {
          // position: absolute;
          // inset: 0;
          // opacity: 0;
          display: none;
          transition: opacity 0.2s ease;
        }

        &:hover .icon--hover {
          // opacity: 1;
          display: flex;
        }

        &:hover .icon--default {
          // opacity: 0;
          display: none;
        }
      }
    }

    .slider_wrapper {
      display: flex;
      height: 60px;
      align-items: flex-start;
      gap: 0px;
      white-space: nowrap;
      width: 100%;
      flex-direction: column;
      height: auto;
      .slider_header_wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        justify-content: space-between;
        width: 100%;
        .slider_header_wrapper_left {
          display: flex;
          align-items: center;
          gap: 12px;
          // Stands in for the profile dropdown when there is only one
          // profile. Matches the heading beside it so the row reads as one line.
          .allocation_single_profile_name {
            color: #475467;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            display: flex;
            align-items: center;
          }

          .slider_heading {
            height: auto;
          }

          .slider_heading {
            color: #475467;
            text-align: center;
            font-size: 14px;
            height: 60px;
            font-weight: 600;
            line-height: 20px;
            align-items: center;
            display: flex;
          }
        }
        .redeem_now_wrapper {
          .redeem_now_btn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            color: var(--_primary-400);
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;

            &:hover {
              color: #53389e;
            }

            &:focus {
              color: #162578;
            }

            &:disabled {
              color: #d0d5dd;
            }
          }
        }
      }

      .allocations_slider_slide_wrapper {
        // Clicking an allocation selects it and its profile (it replaced the
        // Redeem button), so the whole slide is the hit area.
        &[data-is-clickable="true"] {
          cursor: pointer;
        }

        display: flex;
        align-items: center;
        gap: 12px;
        height: 60px;
        width: fit-content;
        margin-right: var(--_ctm-lt-sg-bn-is);

        .allocations_left_info_wrapper {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          .product_name {
            color: #101828;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
          }

          .expiry_date {
            color: #70707b;
            font-size: 11px;
            font-weight: 400;
            line-height: 18px;
            white-space: nowrap;
          }
        }

        .allocations_right_info_wrapper {
          display: flex;
          width: 48px;
          height: 36px;
          justify-content: center;
          align-items: center;
          gap: 10px;

          .product_quantity {
            color: #475467;
            white-space: nowrap;
            font-size: 20px;
            font-weight: 600;
            line-height: 30px;
          }
        }
      }
    }
    .est__dropdown__main {
      position: relative;
      min-width: 150px;
      max-width: 300px;

      label {
        font-size: 14px;
        color: var(--_gray-700);
        margin-bottom: 8px;
        display: block;
      }

      .est__dropdown {
        position: relative;
        .est__dropdown__button {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          // border: 1px solid var(--_gray-200);
          border-color: var(--_sf-bmm-br-clr, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-cr)});
          border-width: var(--_sf-bmm-br-wh, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-wh)});
          border-style: var(--_sf-bmm-br-se, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-se)});
          border-radius: var(--_sf-bmm-br-rs, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-br-rs)});

          background: var(--_sf-bmm-bd-cr, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-bd-cr)});
          gap: var(--_sf-bmm-im-gp, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-gp)});

          padding: var(--_sf-bmm-pg, #{prepareMediaVariable(--_ctm-dn-dn-st-dt-se-pg)});
          // border-radius: 6px;

          &:hover {
            --_sf-bmm-br-clr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-cr)};
            --_sf-bmm-br-wh: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-wh)};
            --_sf-bmm-br-se: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-se)};
            --_sf-bmm-br-rs: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-br-rs)};
            --_sf-bmm-bd-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-bd-cr)};
            --_sf-bmm-im-gp: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-in-gp)};
            --_sf-bmm-pg: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-pg)};

            --_sf-bmm-ft-fy: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-fy)};
            --_sf-bmm-ft-se: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-se)};
            --_sf-bmm-ft-wt: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-wt)};
            --_sf-bmm-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ft-se-ic)};
            --_sf-bmm-tt-an: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-tt-an)};
            --_sf-bmm-lr-sg: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-lr-sg)};
            --_sf-bmm-le-ht: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-le-ht)};
            --_sf-bmm-ue: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-ue)};

            --_sf-bmm-icn-str: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-in-c1)};
            --_sf-bmm-icn-sz: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-in-se)};
            --_sf-bmm-cr: #{prepareMediaVariable(--_ctm-dn-dn-st-hr-se-cr)};
          }

          & > span {
            display: var(--_d-flex);

            &:nth-of-type(1) {
              padding: 0px;
              border: none;
              border-radius: 0px;
              background: transparent;
              color: var(--_sf-bmm-cr, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-cr));
              font-family: var(--_sf-bmm-ft-fy, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-fy));
              text-transform: var(--_sf-bmm-tt-tm, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-tm));
              word-wrap: var(--_sf-bmm-wd-wp, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-wp));
              word-break: var(--_sf-bmm-wd-bk, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-wd-bk));
              font-size: var(--_sf-bmm-ft-se, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se));
              font-weight: var(--_sf-bmm-ft-wt, (--_ctm-dn-dn-st-dt-se-ft-wt));
              font-style: var(
                --_sf-bmm-ft-se-ic,
                prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ft-se-ic)
              );
              text-align: var(--_sf-bmm-tt-an, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-tt-an));
              letter-spacing: var(
                --_sf-bmm-lr-sg,
                prepareMediaVariable(--_ctm-dn-dn-st-dt-se-lr-sg)
              );
              line-height: var(--_sf-bmm-le-ht, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-le-ht));
              text-decoration: var(--_sf-bmm-ue, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-ue));

              @include restrictToLinesShow(1);
            }

            &:nth-of-type(2) {
              svg {
                width: var(--_sf-bmm-icn-sz, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-se));
                height: var(--_sf-bmm-icn-sz, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-se));

                path {
                  stroke: var(--_sf-bmm-icn-str, prepareMediaVariable(--_ctm-dn-dn-st-dt-se-in-c1));
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-dn-st-dt-se-se-wh, 1.25);
                }
              }
            }
          }

          .value__selected {
            // width: 100%;
            // border: none;
            // background-color: transparent;
          }
        }

        &.open .list {
          display: flex;
          // padding: 4px;
          padding: prepareMediaVariable(--_ctm-dn-dn-lt-oy-pg, 4px);
        }

        .list {
          display: none;
          flex-direction: column;
          // border: 1px solid var(--_gray-200);
          // border-radius: 6px;
          border-color: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-cr, var(--_gray-200));
          border-width: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-wh, 1px);
          border-style: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-se, solid);
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          background-color: prepareMediaVariable(--_ctm-dn-dn-lt-oy-bd-cr);
          border-radius: prepareMediaVariable(--_ctm-dn-dn-lt-oy-br-rs, 4px);
          z-index: var(--_higher-zIndex);
          max-height: 200px;
          overflow-y: auto;
          gap: prepareMediaVariable(--_ctm-lt-dn-lt-gp, 0px);

          &.top {
            bottom: 100%;
            top: auto;
          }

          .list__option {
            // padding: 12px;
            cursor: pointer;
            // text-align: left;
            border-color: var(
              --_sf-bmm-v1-br-clr,
              #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-cr)}
            );
            border-width: var(
              --_sf-bmm-v1-br-wh,
              #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-wh)}
            );
            border-style: var(
              --_sf-bmm-v1-br-se,
              #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-se)}
            );
            border-radius: var(
              --_sf-bmm-v1-br-rs,
              #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-br-rs)}
            );

            background: var(
              --_sf-bmm-v1-bd-cr,
              #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-bd-cr)}
            );

            padding: var(
              --_sf-bmm-v1-pg,
              #{prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-pg, 12px)}
            );

            font-family: var(
              --_sf-bmm-v1-ft-fy,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-fy)
            );
            text-transform: var(
              --_sf-bmm-v1-tt-tm,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-tm)
            );
            word-wrap: var(
              --_sf-bmm-v1-wd-wp,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-wp)
            );
            word-break: var(
              --_sf-bmm-v1-wd-bk,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-wd-bk)
            );
            color: var(--_sf-bmm-v1-cr, prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-cr));
            font-size: var(
              --_sf-bmm-v1-ft-se,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se)
            );
            font-weight: var(--_sf-bmm-v1-ft-wt, (--_ctm-dn-dn-lt-im-dt-se-ft-wt));
            font-style: var(
              --_sf-bmm-v1-ft-se-ic,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ft-se-ic)
            );
            text-align: var(
              --_sf-bmm-v1-tt-an,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-tt-an)
            );
            letter-spacing: var(
              --_sf-bmm-v1-lr-sg,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-lr-sg)
            );
            line-height: var(
              --_sf-bmm-v1-le-ht,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-le-ht)
            );
            text-decoration: var(
              --_sf-bmm-v1-ue,
              prepareMediaVariable(--_ctm-dn-dn-lt-im-dt-se-ue)
            );
            &.selected {
              // background-color: var(--_primary-25);
              // color: var(--_primary-400);

              --_sf-bmm-v1-br-clr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-cr)};
              --_sf-bmm-v1-br-wh: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-wh)};
              --_sf-bmm-v1-br-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-se)};
              --_sf-bmm-v1-br-rs: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-br-rs)};
              --_sf-bmm-v1-bd-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-bd-cr)};
              --_sf-bmm-v1-im-gp: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-in-gp)};
              --_sf-bmm-v1-pg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-pg)};

              --_sf-bmm-v1-ft-fy: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-fy)};
              --_sf-bmm-v1-ft-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-se)};
              --_sf-bmm-v1-ft-wt: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-wt)};
              --_sf-bmm-v1-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ft-se-ic)};
              --_sf-bmm-v1-tt-an: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-tt-an)};
              --_sf-bmm-v1-lr-sg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-lr-sg)};
              --_sf-bmm-v1-le-ht: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-le-ht)};
              --_sf-bmm-v1-ue: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-ue)};

              --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-sd-se-cr)};
            }
            &:hover {
              // background-color: var(--_primary-25);
              // color: var(--_primary-400);

              --_sf-bmm-v1-br-clr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-cr)};
              --_sf-bmm-v1-br-wh: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-wh)};
              --_sf-bmm-v1-br-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-se)};
              --_sf-bmm-v1-br-rs: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-br-rs)};
              --_sf-bmm-v1-bd-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-bd-cr)};
              --_sf-bmm-v1-im-gp: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-in-gp)};
              --_sf-bmm-v1-pg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-pg)};

              --_sf-bmm-v1-ft-fy: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-fy)};
              --_sf-bmm-v1-ft-se: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-se)};
              --_sf-bmm-v1-ft-wt: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-wt)};
              --_sf-bmm-v1-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ft-se-ic)};
              --_sf-bmm-v1-tt-an: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-tt-an)};
              --_sf-bmm-v1-lr-sg: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-lr-sg)};
              --_sf-bmm-v1-le-ht: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-le-ht)};
              --_sf-bmm-v1-ue: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-ue)};

              --_sf-bmm-v1-icn-str: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-in-c1)};
              --_sf-bmm-v1-icn-sz: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-in-se)};
              --_sf-bmm-v1-cr: #{prepareMediaVariable(--_ctm-dn-dn-lt-im-hr-se-cr)};
            }
          }
        }
      }
    }
    .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-lt-sh-im-sg);

          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
            height: calc(100% - calc(var(--_ctm-dn-pn-as-aw-se) + 8px));
          }
          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
            height: calc(100% - calc(var(--_ctm-dn-pn-le-le-ht) + 20px));
          }
          &[data-control-type="Bottom"][data-slider-control="Dots"] {
            height: calc(100% - calc(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-dn-pn-as-aw-se);
          height: 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-dn-pn-as-aw-se);
          height: 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-dn-pn-as-aw-se) * 0.5);
            height: calc(var(--_ctm-dn-pn-as-aw-se) * 0.5);
            path {
              stroke: var(--_ctm-dn-pn-as-aw-cr, var(--_tst-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-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-lt-tl-se);
          height: 100%;

          & .embla__thumbs__container {
            flex-direction: column;
            height: 100%;
          }
        }
      }
      &[data-control-type="Side"] {
        display: flex;
        align-self: center;
        gap: 16px;
        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-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-lt-tl-se);
            max-width: var(--_ctm-lt-tl-se);
            height: var(--_ctm-lt-tl-se);
            & img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}