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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="category"] {
    // width: var(--_sf-con-nw-wh);
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-cat-ele-nw-wh-vl,
            var(--_ctm-tab-cat-ele-nw-wh-vl, var(--_ctm-cat-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );

    // height: var(--_ctm-mob-cat-lt-ht, var(--_ctm-tab-cat-lt-ht, var(--_ctm-cat-lt-ht)));

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

    &[data-background-type="color"] {
      background-color: prepareMediaVariable(--_ctm-cat-dn-bd-cr);
    }

    &[data-background-type="gradient"] {
      --_sf-cat-gradient-angle: calc(#{prepareMediaVariable(--_ctm-cat-dn-gt-ae, 90)} * 1deg);
      --_sf-cat-gradient-start-color: #{prepareMediaVariable(--_ctm-cat-dn-gt-st-cr, transparent)};
      --_sf-cat-gradient-start-position: calc(
        #{prepareMediaVariable(--_ctm-cat-dn-gt-st-pn, 0)} * 1%
      );
      --_sf-cat-gradient-end-color: #{prepareMediaVariable(--_ctm-cat-dn-gt-ed-cr, transparent)};
      --_sf-cat-gradient-end-position: calc(
        #{prepareMediaVariable(--_ctm-cat-dn-gt-ed-pn, 100)} * 1%
      );
      --_sf-cat-gradient-position: #{prepareMediaVariable(--_ctm-cat-dn-gt-pn, center)};

      &[data-gradient-type="Linear Gradient"] {
        background-image: linear-gradient(
          var(--_sf-cat-gradient-angle),
          var(--_sf-cat-gradient-start-color) var(--_sf-cat-gradient-start-position),
          var(--_sf-cat-gradient-end-color) var(--_sf-cat-gradient-end-position)
        );
      }

      &[data-gradient-type="Radial Gradient"] {
        background-image: radial-gradient(
          circle at var(--_sf-cat-gradient-position),
          var(--_sf-cat-gradient-start-color) var(--_sf-cat-gradient-start-position),
          var(--_sf-cat-gradient-end-color) var(--_sf-cat-gradient-end-position)
        );
      }
    }

    &[data-background-type="image"] {
      background-image: prepareMediaVariable(--_ctm-cat-dn-bd-ie);
      background-attachment: prepareMediaVariable(--_ctm-cat-dn-bd-at);
      background-position: prepareMediaVariable(--_ctm-cat-dn-bd-pn);
      background-position-y: prepareMediaVariable(--_ctm-cat-dn-bd-pn-y);
      background-repeat: prepareMediaVariable(--_ctm-cat-dn-bd-rt);
      background-size: prepareMediaVariable(--_ctm-cat-dn-bd-se);
    }

    // background-color: var(
    //   --_ctm-mob-cat-dn-bd-cr,
    //   var(--_ctm-tab-cat-dn-bd-cr, var(--_ctm-cat-dn-bd-cr))
    // );
    // background-image: var(
    //   --_ctm-mob-cat-dn-bd-ie,
    //   var(--_ctm-tab-cat-dn-bd-ie, var(--_ctm-cat-dn-bd-ie))
    // );
    // background-attachment: var(
    //   --_ctm-mob-cat-dn-bd-at,
    //   var(--_ctm-tab-cat-dn-bd-at, var(--_ctm-cat-dn-bd-at))
    // );
    // background-position: var(
    //   --_ctm-mob-cat-dn-bd-pn,
    //   var(--_ctm-tab-cat-dn-bd-pn, var(--_ctm-cat-dn-bd-pn))
    // );
    // background-repeat: var(
    //   --_ctm-mob-cat-dn-bd-rt,
    //   var(--_ctm-tab-cat-dn-bd-rt, var(--_ctm-cat-dn-bd-rt))
    // );
    // background-size: var(
    //   --_ctm-mob-cat-dn-bd-se,
    //   var(--_ctm-tab-cat-dn-bd-se, var(--_ctm-cat-dn-bd-se))
    // );
    padding: var(--_ctm-cat-lt-pg, var(--_tst-lt-pg));

    // height: 100%;
    // Each of these reads the mobile and tablet variables ahead of the desktop one.
    // They previously used the desktop variable alone, so anything set while editing in
    // the tablet or mobile breakpoint was written but never applied.
    border-color: var(
      --_ctm-mob-cat-dn-br-cr,
      var(--_ctm-tab-cat-dn-br-cr, var(--_ctm-cat-dn-br-cr, var(--_tst-dn-br-cr)))
    );
    border-style: var(
      --_ctm-mob-cat-dn-br-se,
      var(--_ctm-tab-cat-dn-br-se, var(--_ctm-cat-dn-br-se, var(--_tst-dn-br-se)))
    );
    border-width: var(
      --_ctm-mob-cat-dn-br-wh,
      var(--_ctm-tab-cat-dn-br-wh, var(--_ctm-cat-dn-br-wh, var(--_tst-dn-br-wh)))
    );
    border-radius: var(
      --_ctm-mob-cat-dn-br-rs,
      var(--_ctm-tab-cat-dn-br-rs, var(--_ctm-cat-dn-br-rs, var(--_tst-dn-br-rs)))
    );
    // "Show Border" switch. The border above is painted from CSS variables, so the
    // switch arrives as a data attribute and zeroes the width when it is off.
    &[data-show-border="false"] {
      border-width: 0;
      border-style: none;
    }
    box-shadow: var(
      --_show-shadow,
      var(--_ctm-cat-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-cat-dn-sw-br, var(--_tst-dn-sw-br))
        var(--_ctm-cat-dn-sw-sd, var(--_tst-dn-sw-sd))
        var(--_ctm-cat-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
    );

    // &:not(:has(#{$resizerId}#{$resizeActive})) {
    //   min-height: 100px !important;
    // }

    & > div {
      &.wrapper {
        width: 100%;
        grid-template-columns: 100% !important;
      }
    }
  }
}