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

[data-div-type="element"] {
  &[data-element-type="productActions"] {
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);

    // & > .wrapper {
    //   // width: 100%;
    //   // height: 100%;
    // }
    .text-element {
      background: #6d96e4;
      padding: 10px;
      font-weight: 600;
      color: rgba(75, 69, 70, 1);
    }
    .action__buttons__wrapper {
      background-color: var(
        --_ctm-mob-dn-wt-se-bd-cr,
        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
      );

      border-color: var(
        --_ctm-mob-dn-wt-se-br-cr,
        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-wt-se-br-se,
        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-wt-se-br-wh,
        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
      );

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

      // Widget Style's "Show Border" switch. The border above is painted from CSS
      // variables, so the switch arrives as a data attribute and the width is zeroed
      // here — same approach as the popover's border switch further down.
      &[data-widget-border="false"] {
        border-width: 0;
        border-style: none;
      }

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

      //

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

      display: flex;
      gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
      flex-direction: column;
      align-items: var(--_ctm-mob-lt-is-at, var(--_ctm-tab-lt-is-at, var(--_ctm-lt-is-at)));
      min-height: 30px;

      // &[data-actions-overflow-item-wrap="true"] {
      //   flex-wrap: wrap;
      // }
      // &[data-actions-display-style="true"] {
      //   flex-direction: column;
      // }
      .cart-dropdown-container {
        &:hover {
          --_sf-hr-wh: var(
            --_ctm-mob-dn-wt-hr-wh,
            var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
          );
        }
        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
      }
      &[data-display-style="Stack Horizontally"] {
        flex-direction: row;
        row-gap: var(--_ctm-mob-lt-im-vl-sg, var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg)));
        flex-wrap: wrap;
      }
      // .btn__with__text {
      //   white-space: nowrap;
      // }

      .btn__with__text {
        white-space: nowrap;
        &[data-btn-name="addToCart"] {
          justify-content: center;
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr))};
          &[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-ad-to-ct-hr-se-bd-cr,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-ad-to-ct-hr-se-br-cr,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-ad-to-ct-hr-se-at,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-ad-to-ct-hr-se-gp,
              var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-ad-to-ct-hr-pg,
              var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-ad-to-ct-hr-wh,
              var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-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-ad-to-ct-dt-se-bd-cr)
          );

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

          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-at));
          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-gp));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-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-ad-to-ct-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }

        &[data-btn-name="buyNow"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr))};
          &[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-by-nw-hr-se-bd-cr,
              var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-by-nw-hr-se-br-cr,
              var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-by-nw-hr-se-br-se,
              var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-by-nw-hr-se-br-wh,
              var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-by-nw-hr-se-br-rs,
              var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs))
            );

            --_sf-hr-at: var(
              --_ctm-mob-dn-by-nw-hr-se-at,
              var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-by-nw-hr-se-gp,
              var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-by-nw-hr-pg,
              var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-by-nw-hr-wh,
              var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-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-by-nw-dt-se-bd-cr));

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: prepareMediaVariable(--_ctm-lt-tt-an);
          gap: prepareMediaVariable(--_ctm-lt-gp);

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wh));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-by-nw-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-by-nw-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-by-nw-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }

        &[data-btn-name="wishlist"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr))};
          &[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-wt-hr-se-bd-cr,
              var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-wt-hr-se-br-cr,
              var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-wt-hr-se-br-se,
              var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-wt-hr-se-br-wh,
              var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-wt-hr-se-br-rs,
              var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs))
            );

            --_sf-hr-at: var(
              --_ctm-mob-dn-wt-hr-se-at,
              var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-wt-hr-se-gp,
              var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-wt-hr-pg,
              var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-wt-hr-wh,
              var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-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-wt-dt-se-bd-cr));

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-wt-dt-se-pg));
          // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
          width: 100%;
          border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-wt-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-wt-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-wt-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="compare"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr))};
          &[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-ce-hr-se-bd-cr,
              var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-ce-hr-se-br-cr,
              var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-ce-hr-se-br-se,
              var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-ce-hr-se-br-wh,
              var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-ce-hr-se-br-rs,
              var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs))
            );

            --_sf-hr-at: var(
              --_ctm-mob-dn-ce-hr-se-at,
              var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-ce-hr-se-gp,
              var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-ce-hr-pg,
              var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-ce-hr-wh,
              var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-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-ce-dt-se-bd-cr));

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ce-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-wh));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ce-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-ce-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-ce-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="addToQuote"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr))};
          &[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-ad-to-qe-hr-se-bd-cr,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs))
            );

            --_sf-hr-at: var(
              --_ctm-mob-dn-ad-to-qe-hr-se-at,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-ad-to-qe-hr-se-gp,
              var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-ad-to-qe-hr-pg,
              var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-ad-to-qe-hr-wh,
              var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-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-ad-to-qe-dt-se-bd-cr)
          );

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-at));
          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-gp));

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wh));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-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-ad-to-qe-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="addToOrderTemplate"] {
          --_sf-spinner-clr: #{var(
              --_sf-hr-cr,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr)
            )};
          &[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-ad-to-or-te-hr-se-bd-cr,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs))
            );

            --_sf-hr-at: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-at,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-gp,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp))
            );

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

            // for font

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

            --_sf-hr-in-se: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
            );
            --_sf-hr-in-se: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
            );
            --_sf-hr-in-c1: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
            );
            --_sf-hr-ue: var(
              --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
              var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
            );

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-ad-to-or-te-hr-pg,
              var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-ad-to-or-te-hr-wh,
              var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-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-ad-to-or-te-dt-se-bd-cr)
          );

          padding: 5px 10px;
          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

          justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
          gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));

          border-radius: var(
            --_sf-hr-br-rs,
            prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs)
          );

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

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

            border-style: var(
              --_sf-hr-br-se,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
            );

            border-width: var(
              --_sf-hr-br-wh,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
            );
          }

          .txt {
            display: flex;

            color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));

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

            font-weight: var(
              --_sf-hr-ft-wt,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt)
            );

            font-style: var(
              --_sf-hr-ft-se-ic,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
            );

            text-align: var(
              --_sf-hr-tt-an,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an)
            );

            letter-spacing: var(
              --_sf-hr-lr-sg,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
            );

            line-height: var(
              --_sf-hr-le-ht,
              prepareMediaVariable(--_ctm-dn-ad-to-or-te-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-ad-to-or-te-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));

              path {
                stroke: var(
                  --_sf-hr-in-c1,
                  prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1)
                );
                stroke-width: prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="viewDetails"] {
          --_sf-spinner-clr: #{var(
              --_sf-hr-cr,
              prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-cr)
            )};
          &[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-vw-ds-hr-se-bd-cr,
              var(--_ctm-tab-dn-vw-ds-hr-se-bd-cr, var(--_ctm-dn-vw-ds-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-vw-ds-hr-se-br-cr,
              var(--_ctm-tab-dn-vw-ds-hr-se-br-cr, var(--_ctm-dn-vw-ds-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-vw-ds-hr-se-br-se,
              var(--_ctm-tab-dn-vw-ds-hr-se-br-se, var(--_ctm-dn-vw-ds-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-vw-ds-hr-se-br-wh,
              var(--_ctm-tab-dn-vw-ds-hr-se-br-wh, var(--_ctm-dn-vw-ds-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-vw-ds-hr-se-br-rs,
              var(--_ctm-tab-dn-vw-ds-hr-se-br-rs, var(--_ctm-dn-vw-ds-hr-se-br-rs))
            );

            --_sf-hr-at: var(
              --_ctm-mob-dn-vw-ds-hr-se-at,
              var(--_ctm-tab-dn-vw-ds-hr-se-at, var(--_ctm-dn-vw-ds-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-vw-ds-hr-se-gp,
              var(--_ctm-tab-dn-vw-ds-hr-se-gp, var(--_ctm-dn-vw-ds-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-vw-ds-hr-pg,
              var(--_ctm-tab-dn-vw-ds-hr-pg, var(--_ctm-dn-vw-ds-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-vw-ds-hr-wh,
              var(--_ctm-tab-dn-vw-ds-hr-wh, var(--_ctm-dn-vw-ds-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-vw-ds-dt-se-bd-cr)
          );

          padding: 5px 10px;
          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-wh));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(
              --_sf-hr-le-ht,
              prepareMediaVariable(--_ctm-dn-vw-ds-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-vw-ds-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-se));

              path {
                stroke: var(
                  --_sf-hr-in-c1,
                  prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-in-c1)
                );
                stroke-width: prepareMediaVariable(--_ctm-dn-vw-ds-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="notifyMe"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr))};
          &[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-ny-me-hr-se-bd-cr,
              var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-ny-me-hr-se-br-cr,
              var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-ny-me-hr-se-br-se,
              var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-ny-me-hr-se-br-wh,
              var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-ny-me-hr-se-br-rs,
              var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-ny-me-hr-se-at,
              var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-ny-me-hr-se-gp,
              var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-ny-me-hr-pg,
              var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-ny-me-hr-wh,
              var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-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-ny-me-dt-se-bd-cr));

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-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-ny-me-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-ny-me-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="download"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr))};
          &[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-dd-hr-se-bd-cr,
              var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-dd-hr-se-br-cr,
              var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-dd-hr-se-br-se,
              var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-dd-hr-se-br-wh,
              var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-dd-hr-se-br-rs,
              var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-dd-hr-se-at,
              var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-dd-hr-se-gp,
              var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-dd-hr-pg,
              var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-dd-hr-wh,
              var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-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-dd-dt-se-bd-cr));

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));

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

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-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-dd-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-dd-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
        &[data-btn-name="more"] {
          --_sf-spinner-clr: #{var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr))};
          &[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-me-hr-se-bd-cr,
              var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-me-hr-se-br-cr,
              var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
            );
            --_sf-hr-br-se: var(
              --_ctm-mob-dn-me-hr-se-br-se,
              var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-me-hr-se-br-wh,
              var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
            );
            --_sf-hr-br-rs: var(
              --_ctm-mob-dn-me-hr-se-br-rs,
              var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
            );
            --_sf-hr-at: var(
              --_ctm-mob-dn-me-hr-se-at,
              var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
            );
            --_sf-hr-gp: var(
              --_ctm-mob-dn-me-hr-se-gp,
              var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
            );

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

            // for font

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

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

            // for pading and width
            --_sf-hr-pg: var(
              --_ctm-mob-dn-me-hr-pg,
              var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
            );
            --_sf-hr-wh: var(
              --_ctm-mob-dn-me-hr-wh,
              var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-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-me-dt-se-bd-cr));

          display: flex;
          flex-direction: var(--_sf-fd-bn);
          align-items: center;

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

          padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
          width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
          height: 100%;
          border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));

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

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

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

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

          .txt {
            display: flex;

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

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

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

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

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

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

            line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-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-me-dt-se-in-se));
              height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));

              path {
                stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
                stroke-width: prepareMediaVariable(--_ctm-dn-me-dt-se-se-wh, 1);
              }
            }
          }
          [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;
          }
        }
      }

      // .dropdown-menu {
      //   display: block;
      //   position: absolute;
      //   top: 110%;

      //   &[data-position="left"] {
      //     left: 0;
      //   }
      //   &[data-position="right"] {
      //     right: 0;
      //   }
      //   &[data-position="center"] {
      //     left: 50%;
      //     transform: translateX(-50%);
      //   }
      //   // top: 78%;
      //   // left: 100%;
      //   // margin-left: 8px;

      //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      //   min-width: 200px;
      //   z-index: 100;
      //   display: flex;
      //   flex-direction: column;
      //   padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));

      //   background-color: var(
      //     --_ctm-mob-dn-dn-se-bd-cr,
      //     var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
      //   );

      //   border-color: var(
      //     --_ctm-mob-dn-dn-se-br-cr,
      //     var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
      //   );

      //   border-style: var(
      //     --_ctm-mob-dn-dn-se-br-se,
      //     var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
      //   );

      //   border-width: var(
      //     --_ctm-mob-dn-dn-se-br-wh,
      //     var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
      //   );

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

      //   box-shadow: var(
      //     --_show-shadow,
      //     var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
      //       var(
      //         --_ctm-mob-dn-dn-se-sw-br,
      //         var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
      //       )
      //       var(
      //         --_ctm-mob-dn-dn-se-sw-sd,
      //         var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
      //       )
      //       var(
      //         --_ctm-mob-dn-dn-se-sw-cr,
      //         var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
      //       )
      //   );
      // }
      .popover-container {
        position: relative;
        display: inline-block;
        .popover-trigger {
          cursor: pointer;
          font-weight: 500;
          color: #2b6cb0;
        }

        .popover-box {
          // position: absolute;
          // top: calc(100% + 10px);
          // right: 0;
          // background: white;
          // padding: 12px 16px;
          // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
          // border-radius: 8px;
          // min-width: 150px;
          // z-index: 10;
          position: absolute;
          // border: 1px solid #ccc;
          // min-width: 150px;
          max-width: 200px;
          z-index: 1000;
          // left: 40px;
          // top: 0;
          // right: -125%;
          padding: 8px;
          border-radius: 4px;
        }

        .popover-box {
          display: flex;
          flex-direction: column;

          // width: 100%;
          gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
          background-color: var(
            --_ctm-mob-dn-pr-se-bd-cr,
            var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
          );

          border-color: var(
            --_ctm-mob-dn-pr-se-br-cr,
            var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
          );

          border-style: var(
            --_ctm-mob-dn-pr-se-br-se,
            var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
          );

          border-width: var(
            --_ctm-mob-dn-pr-se-br-wh,
            var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
          );

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

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

          padding: var(
            --_ctm-mob-dn-pr-se-pg,
            var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
          );
        }

        .popover-box strong {
          display: block;
          margin-bottom: 6px;
          font-weight: bold;
        }

        .popover-arrow {
          position: absolute;
          top: 8px;
          left: -5px;
          width: 12px;
          min-height: 12px;

          // background-color: var(
          //   --_ctm-mob-dn-pr-se-bd-cr,
          //   var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
          // );
          transform: rotate(-45deg);
          box-shadow: -1px -1px 0px
            var(
              --_ctm-mob-dn-pr-se-br-cr,
              var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
            );
        }

        .popover_item {
          // padding-inline: var(--_sf-cd-gp);
          color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
          font-family: var(
            --_ctm-mob-dn-pr-se-ft-fy,
            var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-pr-se-tt-tm,
            var(--_ctm-tab-dn-pr-se-tt-tm, var(--_ctm-dn-pr-se-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-pr-se-wd-wp,
            var(--_ctm-tab-dn-pr-se-wd-wp, var(--_ctm-dn-pr-se-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-pr-se-wd-bk,
            var(--_ctm-tab-dn-pr-se-wd-bk, var(--_ctm-dn-pr-se-wd-bk))
          );
          font-size: var(
            --_ctm-mob-dn-pr-se-ft-se,
            var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-pr-se-ft-wt,
            var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-pr-se-ft-se-ic,
            var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-pr-se-tt-an,
            var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-pr-se-lr-sg,
            var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-pr-se-le-ht,
            var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
          );
          text-decoration: var(
            --_ctm-mob-dn-pr-se-ue,
            var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
          );
          // margin-left: 10px;
        }
      }

      // Horizontal side of the popover, from design > Popover Style > Popover Position.
      // Only the side changes — the vertical placement below is left to the display
      // style, so a vertically stacked list still opens beside its trigger and a
      // horizontal one still opens underneath it. "Right" is the original behaviour and
      // stays the default, so elements saved before this control are unaffected.
      &[data-display-style="Stack Vertically"] {
        .popover-box {
          left: 100%;
          transform: translate(0%);
          margin-left: 6px;
          top: 0;
        }

        // Beside the trigger, on its left instead of its right.
        .popover-container[data-popover-position="Left"] .popover-box {
          left: auto;
          right: 100%;
          margin-left: 0;
          margin-right: 6px;
        }
      }
      &[data-display-style="Stack Horizontally"] {
        .popover-box {
          right: 0;
          margin-top: 6px;
        }

        // Under the trigger, aligned to its left edge instead of its right.
        .popover-container[data-popover-position="Left"] .popover-box {
          right: auto;
          left: 0;
        }
      }

      // "Show Border" switch for the popover. The border is painted from CSS variables
      // above, so the switch arrives as a data attribute and the width is zeroed here.
      // Placed after the .popover-box rules and one attribute deeper, so it wins.
      .popover-container[data-popover-border="false"] .popover-box {
        border-width: 0;
        border-style: none;
      }

      // The arrow sits on the edge facing the trigger, so it swaps sides with the box.
      // Its shadow is drawn on two adjacent sides, which also has to follow the flip.
      .popover-container[data-popover-position="Left"] .popover-arrow {
        left: auto;
        right: -5px;
        box-shadow: 1px 1px 0px
          var(--_ctm-mob-dn-pr-se-br-cr, var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr)));
      }
    }
  }
}