@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$flex: "flx";
$grid: "grd";
$flexRow: "rw";
$flexRowReverse: "rw-rv";
$flexColumn: "cln";
$flexColumnReverse: "cln-rv";
[data-div-type="element"] {
  &[data-element-type="layouter-pro-item"] {
    // width: var(--_sf-con-nw-wh);
    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    // width: calc(1% * var(--_ctm-rep-ele-nw-wh-vl, auto));
    // width: 100%;
    // height: var(--_ctm-con-lt-ht);
    // margin: var(--_ctm-rep-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));

    // width: 100%;
    // background: var(--_ctm-repe-dn-bd-cr);
    width: prepareMediaVariable(--_ctm-layout-lt-wh);

    & > div {
      &.wrapper {
        width: 100%;
        // height: 100%;
        min-height: prepareMediaVariable(--_ctm-layout-lt-mn-ht);
        padding: prepareMediaVariable(--_ctm-layout-lt-pg);

        &:is([data-background-type="color"] > *).wrapper {
          background-color: #{prepareMediaVariable(--_ctm-layout-dn-bd-cr)};
        }

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

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

        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
          background-image: radial-gradient(
            circle at var(--_sf-layout-gradient-position),
            var(--_sf-layout-gradient-start-color) var(--_sf-layout-gradient-start-position),
            var(--_sf-layout-gradient-end-color) var(--_sf-layout-gradient-end-position)
          );
        }
        &:is([data-background-type="image"] > *).wrapper {
          background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
          background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
          background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
          background-position-y: prepareMediaVariable(--_ctm-layout-dn-bd-pn-y);
          background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
          background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
        }

        // background-color: prepareMediaVariable(--_ctm-layout-dn-bd-cr);
        // background-image: prepareMediaVariable(--_ctm-layout-dn-bd-ie);
        // background-attachment: prepareMediaVariable(--_ctm-layout-dn-bd-at);
        // background-position: prepareMediaVariable(--_ctm-layout-dn-bd-pn);
        // background-repeat: prepareMediaVariable(--_ctm-layout-dn-bd-rt);
        // background-size: prepareMediaVariable(--_ctm-layout-dn-bd-se);
        border-radius: prepareMediaVariable(--_ctm-layout-dn-br-rs);

        // flex-direction: column;
        // gap: prepareMediaVariable(--_ctm-layout-lt-im-gp);
        // align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
        display: var(--_d-flex) !important;
        column-gap: prepareMediaVariable(--_ctm-layout-lt-cn-gp);
        row-gap: prepareMediaVariable(--_ctm-layout-lt-rw-gp);

        &:is(.#{$flex} > *) {
          display: var(--_d-flex) !important;
          flex-wrap: prepareMediaVariable(--_ctm-layout-lt-fx-wp);
          overflow: prepareMediaVariable(--_ctm-layout-lt-fx-ow);

          &.#{$flexRow} {
            flex-direction: row;
            align-items: prepareMediaVariable(--_ctm-layout-lt-an-is);
            justify-content: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
          }
          &.#{$flexRowReverse} {
            flex-direction: row-reverse;
            align-items: prepareMediaVariable(--_ctm-layout-lt-an-is);
            justify-content: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
          }
          &.#{$flexColumn} {
            flex-direction: column;
            justify-content: prepareMediaVariable(--_ctm-layout-lt-an-is);
            align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
          }
          &.#{$flexColumnReverse} {
            flex-direction: column-reverse;
            justify-content: prepareMediaVariable(--_ctm-layout-lt-an-is);
            align-items: prepareMediaVariable(--_ctm-layout-lt-jy-ct);
          }
        }

        &[data-show-border="true"] {
          border-color: prepareMediaVariable(--_ctm-layout-dn-br-cr);
          border-style: prepareMediaVariable(--_ctm-layout-dn-br-se);
          border-width: prepareMediaVariable(--_ctm-layout-dn-br-wh);
        }

        &[data-show-boxshadow="true"] {
          box-shadow: var(
            --_hide-grid-shadow,
            prepareMediaVariable(--_ctm-layout-dn-sw-ae)
              prepareMediaVariable(--_ctm-layout-dn-sw-br)
              prepareMediaVariable(--_ctm-layout-dn-sw-sd)
              prepareMediaVariable(--_ctm-layout-dn-sw-cr)
          );
        }
      }
    }
  }
}