@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="iconLibrary"] {
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-ele-nw-wh-vl,
            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // height: var(--_ctm-lt-ht, --_tst-lt-ht);

    & > .wrapper {
      width: 100%;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
    }
    &[data-widget-border="true"] .icon__container {
      border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
      border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
      border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
    }

    &[data-widget-shadow="true"] .icon__container {
      box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
        var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
        var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
        var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
    }

    &[data-widget-shadow="false"] .icon__container {
      box-shadow: none;
    }

    .icon__container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
      border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));

      .icon {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
        height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));

        svg {
          width: 100%;
          height: 100%;
          path {
            stroke: var(
              --_ctm-mob-dn-in-c1,
              var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1))
            ) !important;
            // Overrides the stroke-width presentation attribute baked into each icon's
            // markup. A plain declaration is enough — presentation attributes lose to
            // any CSS rule — so no !important is needed here.
            stroke-width: var(--_ctm-mob-dn-se-wh, var(--_ctm-tab-dn-se-wh, var(--_ctm-dn-se-wh)));
          }
        }
      }
    }
  }
}