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

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

    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    position: relative;

    & > .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    &[data-widget-border="true"] {
      .search-wrapper {
        border-color: var(
          --_ctm-mob-dn-sh-br-br-cr,
          var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-sh-br-br-se,
          var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-sh-br-br-wh,
          var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
        );
        gap: prepareMediaVariable(--_ctm-dn-sh-br-im-gp);
        padding: prepareMediaVariable(--_ctm-lt-pg);
      }
    }

    &[data-widget-shadow="false"] {
      --_show-shadow: none;
    }

    .search-container {
      display: flex;
      width: 100%;
      height: 100%;
      padding: var(--_ctm-mob-dn-sh-cr-pg, var(--_ctm-tab-dn-sh-cr-pg, var(--_ctm-dn-sh-cr-pg)));
      display: flex;
      gap: var(
        --_ctm-mob-dn-sh-cr-im-gp,
        var(--_ctm-tab-dn-sh-cr-im-gp, var(--_ctm-dn-sh-cr-im-gp))
      );
      transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
      // &:focus-within {
      //   outline: 2px solid
      //     color-mix(in srgb, prepareMediaVariable(--_ctm-dn-sh-br-fs-br-cr) 10%, transparent);
      //   background-color: prepareMediaVariable(--_ctm-dn-sh-br-fs-bd-cr);
      //   border-color: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-cr);
      //   border-style: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-se);
      //   border-width: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-wh);
      //   border-radius: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-rs);
      //   .search-wrapper {
      //     border: 0;
      //   }
      // }
      .no-records-found {
        padding: 12px;
        text-align: center;
        background: var(--_gray-100);
        color: var(--_gray-600);
      }
      &.dropdown {
        &:focus-within {
          .dropdown__options {
            display: block;
          }
        }
      }
      // .btn__with__text[data-btn-name="buttonStyles"] {
      .btn__with__text {
        &[data-show-shadow="false"] {
          --_show-shadow: none;
        }
        &[data-icon-position="left"] {
          --_sf-fd-bn: row;
        }
        &[data-icon-position="right"] {
          --_sf-fd-bn: row-reverse;
        }
        &[data-icon-position="center"] {
          --_sf-fd-bn: row;
        }

        &:hover {
          --_sf-hr-bd-cr: var(
            --_ctm-mob-dn-rm-bn-hr-se-bd-cr,
            var(--_ctm-tab-dn-rm-bn-hr-se-bd-cr, var(--_ctm-dn-rm-bn-hr-se-bd-cr))
          );
          --_sf-hr-br-cr: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-cr,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-cr, var(--_ctm-dn-rm-bn-hr-se-br-cr))
          );
          --_sf-hr-br-se: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-se,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-se, var(--_ctm-dn-rm-bn-hr-se-br-se))
          );
          --_sf-hr-br-wh: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-wh,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-wh, var(--_ctm-dn-rm-bn-hr-se-br-wh))
          );
          --_sf-hr-br-rs: var(
            --_ctm-mob-dn-rm-bn-hr-se-br-rs,
            var(--_ctm-tab-dn-rm-bn-hr-se-br-rs, var(--_ctm-dn-rm-bn-hr-se-br-rs))
          );
          --_sf-hr-at: var(
            --_ctm-mob-dn-rm-bn-hr-se-at,
            var(--_ctm-tab-dn-rm-bn-hr-se-at, var(--_ctm-dn-rm-bn-hr-se-at))
          );
          --_sf-hr-gp: var(
            --_ctm-mob-dn-rm-bn-hr-se-gp,
            var(--_ctm-tab-dn-rm-bn-hr-se-gp, var(--_ctm-dn-rm-bn-hr-se-gp))
          );

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

          // for font

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

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

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

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
        }
        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-bd-cr));
        white-space: nowrap;
        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-pg));
        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-bn-ss-dt-se-wh));
        display: flex;
        flex-direction: var(--_sf-fd-bn);
        align-items: center;

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

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

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

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

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

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

        .txt {
          display: flex;

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

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

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

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

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

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

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

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

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

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

        &:hover .icon--default {
          // opacity: 0;
          display: none;
        }
      }
    }
    .search__button {
      background-color: blue;
      color: white;
      white-space: nowrap;
      padding: 8px 12px;
      border-radius: 4px;
    }

    .search-wrapper {
      display: flex;
      flex-direction: var(--_sf-fd, row);
      align-items: center;
      width: 100%;
      height: 100%;
      // border: 1px solid var(--_gray-200);
      background-color: var(
        --_ctm-mob-dn-sh-br-bd-cr,
        var(--_ctm-tab-dn-sh-br-bd-cr, var(--_ctm-dn-sh-br-bd-cr))
      );
      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-sh-br-sw-ae, var(--_ctm-tab-dn-sh-br-sw-ae, var(--_ctm-dn-sh-br-sw-ae)))
          var(--_ctm-mob-dn-sh-br-sw-br, var(--_ctm-tab-dn-sh-br-sw-br, var(--_ctm-dn-sh-br-sw-br)))
          var(--_ctm-mob-dn-sh-br-sw-sd, var(--_ctm-tab-dn-sh-br-sw-sd, var(--_ctm-dn-sh-br-sw-sd)))
          var(--_ctm-mob-dn-sh-br-sw-cr, var(--_ctm-tab-dn-sh-br-sw-cr, var(--_ctm-dn-sh-br-sw-cr)))
      );
      border-radius: var(
        --_ctm-mob-dn-sh-br-br-rs,
        var(--_ctm-tab-dn-sh-br-br-rs, var(--_ctm-dn-sh-br-br-rs))
      );
      transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s,
        box-shadow 0.2s;
      &:focus-within {
        // outline: 2px solid
        //   color-mix(in srgb, prepareMediaVariable(--_ctm-dn-sh-br-fs-br-cr) 10%, transparent);
        background-color: prepareMediaVariable(--_ctm-dn-sh-br-fs-bd-cr);
        border-color: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-wh);
        border-radius: prepareMediaVariable(--_ctm-dn-sh-br-fs-br-rs);
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-sh-br-fs-sw-ae,
              var(--_ctm-tab-dn-sh-br-fs-sw-ae, var(--_ctm-dn-sh-br-fs-sw-ae))
            )
            var(
              --_ctm-mob-dn-sh-br-fs-sw-br,
              var(--_ctm-tab-dn-sh-br-fs-sw-br, var(--_ctm-dn-sh-br-fs-sw-br))
            )
            var(
              --_ctm-mob-dn-sh-br-fs-sw-sd,
              var(--_ctm-tab-dn-sh-br-fs-sw-sd, var(--_ctm-dn-sh-br-fs-sw-sd))
            )
            var(
              --_ctm-mob-dn-sh-br-fs-sw-cr,
              var(--_ctm-tab-dn-sh-br-fs-sw-cr, var(--_ctm-dn-sh-br-fs-sw-cr))
            )
        );
        transition: all 400ms ease;
      }

      .search-input {
        height: 100%;
        flex-grow: 1;
        border: none;
        outline: none;
        // padding: 8px;
        background: transparent;
        padding: var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)));
        color: var(
          --_ctm-mob-dn-sh-br-cr,
          var(--_ctm-tab-dn-sh-br-cr, var(--_ctm-dn-sh-br-cr, #333))
        );
        font-family: var(
          --_ctm-mob-dn-sh-br-ft-fy,
          var(--_ctm-tab-dn-sh-br-ft-fy, var(--_ctm-dn-sh-br-ft-fy))
        );
        text-transform: var(
          --_ctm-mob-dn-sh-br-tt-tm,
          var(--_ctm-tab-dn-sh-br-tt-tm, var(--_ctm-dn-sh-br-tt-tm))
        );
        word-wrap: var(
          --_ctm-mob-dn-sh-br-wd-wp,
          var(--_ctm-tab-dn-sh-br-wd-wp, var(--_ctm-dn-sh-br-wd-wp))
        );
        word-break: var(
          --_ctm-mob-dn-sh-br-wd-bk,
          var(--_ctm-tab-dn-sh-br-wd-bk, var(--_ctm-dn-sh-br-wd-bk))
        );
        font-size: var(
          --_ctm-mob-dn-sh-br-ft-se,
          var(--_ctm-tab-dn-sh-br-ft-se, var(--_ctm-dn-sh-br-ft-se, 14px))
        );
        font-weight: var(
          --_ctm-mob-dn-sh-br-ft-wt,
          var(--_ctm-tab-dn-sh-br-ft-wt, var(--_ctm-dn-sh-br-ft-wt))
        );
        font-style: var(
          --_ctm-mob-dn-sh-br-ft-se-ic,
          var(--_ctm-tab-dn-sh-br-ft-se-ic, var(--_ctm-dn-sh-br-ft-se-ic))
        );
        text-align: var(
          --_ctm-mob-dn-sh-br-tt-an,
          var(--_ctm-tab-dn-sh-br-tt-an, var(--_ctm-dn-sh-br-tt-an))
        );
        letter-spacing: var(
          --_ctm-mob-dn-sh-br-lr-sg,
          var(--_ctm-tab-dn-sh-br-lr-sg, var(--_ctm-dn-sh-br-lr-sg))
        );
        line-height: var(
          --_ctm-mob-dn-sh-br-le-ht,
          var(--_ctm-tab-dn-sh-br-le-ht, var(--_ctm-dn-sh-br-le-ht))
        );
        text-decoration: var(
          --_ctm-mob-dn-sh-br-ue,
          var(--_ctm-tab-dn-sh-br-ue, var(--_ctm-dn-sh-br-ue))
        );

        &::placeholder {
          opacity: 0.6;
          color: var(
            --_ctm-mob-dn-pr-tt-cr,
            var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr, #333))
          );
          font-family: var(
            --_ctm-mob-dn-pr-tt-ft-fy,
            var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-pr-tt-tt-tm,
            var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-pr-tt-wd-wp,
            var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-pr-tt-wd-bk,
            var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk))
          );
          font-size: var(
            --_ctm-mob-dn-pr-tt-ft-se,
            var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se, 14px))
          );
          font-weight: var(
            --_ctm-mob-dn-pr-tt-ft-wt,
            var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-pr-tt-ft-se-ic,
            var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-pr-tt-tt-an,
            var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-pr-tt-lr-sg,
            var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-pr-tt-le-ht,
            var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
          );
          text-decoration: var(
            --_ctm-mob-dn-pr-tt-ue,
            var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
          );
        }
      }

      .search-button {
        transition: 0.3s;
        height: 100%;
        display: flex;
        align-items: center;

        background-color: var(
          --_ctm-mob-dn-sh-in-bd-cr,
          var(--_ctm-tab-dn-sh-in-bd-cr, var(--_ctm-dn-sh-in-bd-cr))
        );
        border-color: var(
          --_ctm-mob-dn-sh-in-br-cr,
          var(--_ctm-tab-dn-sh-in-br-cr, var(--_ctm-dn-sh-in-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-sh-in-br-se,
          var(--_ctm-tab-dn-sh-in-br-se, var(--_ctm-dn-sh-in-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-sh-in-br-wh,
          var(--_ctm-tab-dn-sh-in-br-wh, var(--_ctm-dn-sh-in-br-wh))
        );
        border-radius: var(
          --_ctm-mob-dn-sh-in-br-rs,
          var(--_ctm-tab-dn-sh-in-br-rs, var(--_ctm-dn-sh-in-br-rs))
        );
        box-shadow: var(
          --_show-text-content-shadow,
          var(
              --_ctm-mob-dn-sh-in-sw-ae,
              var(--_ctm-tab-dn-sh-in-sw-ae, var(--_ctm-dn-sh-in-sw-ae, none))
            )
            var(
              --_ctm-mob-dn-sh-in-sw-br,
              var(--_ctm-tab-dn-sh-in-sw-br, var(--_ctm-dn-sh-in-sw-br, none))
            )
            var(
              --_ctm-mob-dn-sh-in-sw-sd,
              var(--_ctm-tab-dn-sh-in-sw-sd, var(--_ctm-dn-sh-in-sw-sd, none))
            )
            var(
              --_ctm-mob-dn-sh-in-sw-cr,
              var(--_ctm-tab-dn-sh-in-sw-cr, var(--_ctm-dn-sh-in-sw-cr, none))
            )
        );
        padding: var(--_ctm-mob-dn-sh-in-pg, var(--_ctm-tab-dn-sh-in-pg, var(--_ctm-dn-sh-in-pg)));
        .icon {
          display: flex;
        }
        svg {
          width: var(
            --_ctm-mob-dn-sh-in-in-se,
            var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
          );
          height: var(
            --_ctm-mob-dn-sh-in-in-se,
            var(--_ctm-tab-dn-sh-in-in-se, var(--_ctm-dn-sh-in-in-se))
          );

          path {
            stroke: var(
              --_ctm-mob-dn-sh-in-in-c1,
              var(--_ctm-tab-dn-sh-in-in-c1, var(--_ctm-dn-sh-in-in-c1))
            );
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-sh-in-se-wh, 1.25);
          }
        }

        // &:hover {
        //   background: #0056b3;
        // }
      }
      &[data-icon-position="Right"] {
        --_sf-fd: row-reverse;
        --_sf-jc: flex-end;
      }
    }

    .dropdown__options {
      list-style: none;
      // margin: 3px 0 0;
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--_gray-200);
      border-radius: 6px;
      background: white;
      position: absolute;
      width: 100%;
      z-index: 1000;
      // top: 58px;
      top: calc(var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) + 4px);
      // display: none; /* Hidden by default */
      cursor: pointer;
      transition: background 0.2s;

      .option__group {
        h4 {
          background-color: var(--_gray-50);
          padding: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 12px;
          text-transform: uppercase;
        }
        .dropdown_option_wrapper {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 4px;
          .dropdown__option {
            display: flex;
            align-items: center;
            padding: 4px;
            color: var(--_thm-cs-be-cr-1);
            &:hover {
              // background-color: var(--_primary-25);
              @include BgColorLighter(var(--_thm-cs-at-py), 5%);
              color: var(--_thm-cs-at-py);
              border-radius: 4px;
              .option__img {
                border: 1px solid var(--_gray-300);
              }
            }
            .option__img {
              %flex__center {
                display: flex;
                align-items: center;
                justify-content: center;
              }
              width: 32px;
              height: 32px;
              border: 1px solid var(--_gray-200);
              border-radius: 4px;
              background-color: var(--_gray-50);
              display: flex;
              justify-content: center;
              align-items: center;
              span {
                width: 32px;
                height: 32px;
                @extend %flex__center;
              }
              img {
                height: 100%;
                width: 100%;
                object-fit: contain;
                @extend %flex__center;
              }
            }
            .option__desc {
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              font-weight: 500;
              font-size: 14px;
              padding: 6px 12px;
              line-height: 22px;
              width: 100%;
            }
            .option__count {
              font-size: 12px;
              color: var(--_gray-600);
              text-wrap: nowrap;
            }
          }
        }
      }
    }

    /* Optional: show dropdown when input is focused (basic) */
    // .dropdown:focus-within .dropdown-options {
    //   display: block;
    // }

    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
  }
}