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

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

    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

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

    // aspect-ratio: var(
    //   --_ctm-mob-aspect-ratio,
    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
    // );

    position: relative;

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

    .filter__results {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
      .selected__category {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        // .selected_item {
        //   display: flex;
        //   gap: 8px;
        //   border: 1px solid var(--_gray-200);
        //   font-size: 14px;
        //   border-radius: 30px;
        //   padding: 5px 10px;
        //   align-items: center;
        //   &:hover {
        //     border: 1px solid var(--_gray-300);
        //     background-color: var(--_gray-50);
        //     cursor: pointer;
        //   }
        // }
        .selected_item {
          display: flex;
          gap: 8px;
          border: 1px solid var(--_gray-200);
          border-radius: 30px;
          padding: 6px 12px;
          align-items: center;

          background-color: var(
            --_sf-hr-bd-cr,
            var(
              --_ctm-mob-dn-dt-se-bd-cr,
              var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
            )
          );
          border-radius: var(
            --_sf-hr-br-br,
            var(
              --_ctm-mob-dn-dt-se-br-rs,
              var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs))
            )
          );
          padding: var(
            --_sf-hr-sd-im-pg,
            var(--_ctm-mob-dn-dt-se-pg, var(--_ctm-tab-dn-dt-se-pg, var(--_ctm-dn-dt-se-pg)))
          );
          box-shadow: var(
            --_hover-show-shadow,
            var(
              --_sf-hr-bx-sw,
              var(
                --_show-shadow,
                var(
                    --_ctm-mob-dn-dt-se-sw-ae,
                    var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
                  )
                  var(
                    --_ctm-mob-dn-dt-se-sw-br,
                    var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
                  )
                  var(
                    --_ctm-mob-dn-dt-se-sw-sd,
                    var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
                  )
                  var(
                    --_ctm-mob-dn-dt-se-sw-cr,
                    var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
                  )
              )
            )
          );

          color: var(
            --_sf-hr-fc,
            var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)))
          );
          font-family: var(
            --_sf-hr-ff,
            var(
              --_ctm-mob-dn-dt-se-ft-fy,
              var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy))
            )
          );
          text-transform: var(
            --_sf-hr-tt-tm,
            var(
              --_ctm-mob-dn-dt-se-tt-tm,
              var(--_ctm-tab-dn-dt-se-tt-tm, var(--_ctm-dn-dt-se-tt-tm))
            )
          );
          word-wrap: var(
            --_sf-hr-wd-wp,
            var(
              --_ctm-mob-dn-dt-se-wd-wp,
              var(--_ctm-tab-dn-dt-se-wd-wp, var(--_ctm-dn-dt-se-wd-wp))
            )
          );
          word-break: var(
            --_sf-hr-wd-bk,
            var(
              --_ctm-mob-dn-dt-se-wd-bk,
              var(--_ctm-tab-dn-dt-se-wd-bk, var(--_ctm-dn-dt-se-wd-bk))
            )
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: var(
            --_sf-hr-fs,
            var(
              --_ctm-mob-dn-dt-se-ft-se,
              var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se))
            )
          );
          font-weight: var(
            --_sf-hr-fw,
            var(
              --_ctm-mob-dn-dt-se-ft-wt,
              var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt))
            )
          );
          font-style: var(
            --_sf-hr-ft,
            var(
              --_ctm-mob-dn-dt-se-ft-se-ic,
              var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
            )
          );
          text-align: var(
            --_sf-hr-ta,
            var(
              --_ctm-mob-dn-dt-se-tt-an,
              var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an))
            )
          );
          letter-spacing: var(
            --_sf-hr-ls,
            var(
              --_ctm-mob-dn-dt-se-lr-sg,
              var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg))
            )
          );
          line-height: var(
            --_sf-hr-lh,
            var(
              --_ctm-mob-dn-dt-se-le-ht,
              var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht))
            )
          );
          text-decoration: var(
            --_sf-hr-tt-dn,
            var(--_ctm-mob-dn-dt-se-ue, var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue)))
          );
          &[data-show-selected-item-border="true"] {
            border-color: var(
              --_sf-hr-br-cr,
              var(
                --_ctm-mob-dn-dt-se-br-cr,
                var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr))
              )
            );
            border-style: var(
              --_sf-hr-br-st,
              var(
                --_ctm-mob-dn-dt-se-br-se,
                var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se))
              )
            );
            border-width: var(
              --_sf-hr-br-wh,
              var(
                --_ctm-mob-dn-dt-se-br-wh,
                var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh))
              )
            );
          }
          &:hover {
            // border: 1px solid var(--_gray-300);
            // background-color: var(--_gray-50);
            // cursor: pointer;
            --_sf-hr-bd-cr: var(
              --_ctm-mob-dn-hr-se-bd-cr,
              var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
            );
            --_sf-hr-br-cr: var(
              --_ctm-mob-dn-hr-se-br-cr,
              var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
            );
            --_sf-hr-br-st: var(
              --_ctm-mob-dn-hr-se-br-se,
              var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
            );
            --_sf-hr-br-wh: var(
              --_ctm-mob-dn-hr-se-br-wh,
              var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
            );
            --_sf-hr-br-br: var(
              --_ctm-mob-dn-hr-se-br-rs,
              var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
            );
            --_sf-hr-sd-im-pg: var(
              --_ctm-mob-dn-hr-se-pg,
              var(--_ctm-tab-dn-hr-se-pg, var(--_ctm-dn-hr-se-pg))
            );
            --_sf-hr-bx-sw: var(
                --_ctm-mob-dn-hr-se-sw-ae,
                var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-hr-se-sw-br,
                var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br))
              )
              var(
                --_ctm-mob-dn-hr-se-sw-sd,
                var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-hr-se-sw-cr,
                var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr))
              );

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

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

            &[data-hover-show-shadow="false"] {
              --_hover-show-shadow: none;
            }
            &[data-hover-show-icon="false"] {
              --_hover-show-icon: none;
            }
            &[data-show-selected-item-hover-border="true"] {
              border-color: var(
                --_sf-hr-br-cr,
                var(
                  --_ctm-mob-dn-dt-se-br-cr,
                  var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr))
                )
              );
              border-style: var(
                --_sf-hr-br-st,
                var(
                  --_ctm-mob-dn-dt-se-br-se,
                  var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se))
                )
              );
              border-width: var(
                --_sf-hr-br-wh,
                var(
                  --_ctm-mob-dn-dt-se-br-wh,
                  var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh))
                )
              );
            }
          }
        }
      }
    }

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