@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$childItemSelector: '[data-element-type="layouter-pro-item"]';
$flex: "flx";
$grid: "grd";
$flexRow: "rw";
$flexRowReverse: "rw-rv";
$flexColumn: "cln";
$flexColumnReverse: "cln-rv";
[data-div-type="element"] {
  &[data-element-type="layouter-pro"] {
    // 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% * #{prepareMediaVariable(--_ctm-layou-ele-nw-wh-vl)});
    max-width: 100% !important;
    // width: min(#{prepareMediaVariable(--_ctm-layou-lt-wh)}, 100%);
    // width: 100%;
    // height: var(--_ctm-con-lt-ht);
    margin: prepareMediaVariable(--_ctm-layou-lt-mn);

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

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

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

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

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

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

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

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

    & > div {
      &.wrapper {
        width: 100%;
        min-height: prepareMediaVariable(--_ctm-layou-lt-mn-ht);
        column-gap: prepareMediaVariable(--_ctm-layou-lt-cn-gp);
        row-gap: prepareMediaVariable(--_ctm-layou-lt-rw-gp);

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

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

        // & > div {
        //   &#{$childItemSelector} {
        //     // width: 100%;
        //   }
        // }
        // grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
        // grid-auto-rows: minmax(100px, 1fr);
      }
    }
  }
}