@use "sass:map";
@use "sass:list";

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="subCategory"] {
    // width: var(--_sf-con-nw-wh);
    width: var(
      --_sf-mob-el-wh-st-mx,
      var(
        --_sf-tab-el-wh-st-mx,
        var(
          --_sf-el-wh-st-mx,
          calc(
            1% *
              var(
                --_ctm-mob-subc-ele-nw-wh-vl,
                var(--_ctm-tab-subc-ele-nw-wh-vl, var(--_ctm-subc-ele-nw-wh-vl, var(--_sf-nw-wh)))
              )
          )
        )
      )
    );

    margin: var(--_ctm-mob-subc-lt-mn, var(--_ctm-tab-subc-lt-mn, var(--_ctm-subc-lt-mn)));

    background-color: var(
      --_ctm-mob-subc-dn-bd-cr,
      var(--_ctm-tab-subc-dn-bd-cr, var(--_ctm-subc-dn-bd-cr))
    );

    padding: var(--_ctm-mob-subc-lt-pg, var(--_ctm-tab-subc-lt-pg, var(--_ctm-subc-lt-pg)));

    border-color: var(
      --_ctm-mob-subc-dn-br-cr,
      var(--_ctm-tab-subc-dn-br-cr, var(--_ctm-subc-dn-br-cr))
    );

    border-style: var(
      --_ctm-mob-subc-dn-br-se,
      var(--_ctm-tab-subc-dn-br-se, var(--_ctm-subc-dn-br-se))
    );

    border-width: var(
      --_ctm-mob-subc-dn-br-wh,
      var(--_ctm-tab-subc-dn-br-wh, var(--_ctm-subc-dn-br-wh))
    );

    border-radius: var(
      --_ctm-mob-subc-dn-br-rs,
      var(--_ctm-tab-subc-dn-br-rs, var(--_ctm-subc-dn-br-rs))
    );

    box-shadow: var(
      --_show-shadow,
      var(--_ctm-mob-subc-dn-sw-ae, var(--_ctm-tab-subc-dn-sw-ae, var(--_ctm-subc-dn-sw-ae)))
        var(--_ctm-mob-subc-dn-sw-br, var(--_ctm-tab-subc-dn-sw-br, var(--_ctm-subc-dn-sw-br)))
        var(--_ctm-mob-subc-dn-sw-sd, var(--_ctm-tab-subc-dn-sw-sd, var(--_ctm-subc-dn-sw-sd)))
        var(--_ctm-mob-subc-dn-sw-cr, var(--_ctm-tab-subc-dn-sw-cr, var(--_ctm-subc-dn-sw-cr)))
    );

    // &:not(:has(#{$resizerId}#{$resizeActive})) {
    //   min-height: 100px !important;
    // }

    & > div {
      &.wrapper {
        width: 100%;
        // grid-template-rows: max(var(--_ctm-subc-lt-ht), auto) !important;
      }
    }
  }
}
