$activeElementSelector: "[data-has-clicked='true']";
$elementSelector: "[data-div-type='element']";

@use "./functions.scss" as *;

$flex: "flx";
$grid: "grd";
$flexRow: "rw";
$flexRowReverse: "rw-rv";
$flexColumn: "cln";
$flexColumnReverse: "cln-rv";
[data-div-type="grid"] {
  position: var(--_p-relative);
  display: var(--_d-grid);
  // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
  // height: 100% !important;
  box-shadow: var(
    --_hide-grid-shadow,
    prepareMediaVariable(--_ctm-gri-dn-sw-ae) prepareMediaVariable(--_ctm-gri-dn-sw-br)
      prepareMediaVariable(--_ctm-gri-dn-sw-sd) prepareMediaVariable(--_ctm-gri-dn-sw-cr)
  );
  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));

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

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

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

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

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

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

  &[data-show-shadow="false"] {
    --_hide-grid-shadow: none;
  }
  &[data-show-border="false"] {
    --_hide-grid-border: none;
  }

  &:is(#{$activeElementSelector}) {
    &:has(#{$activeElementSelector}#{$elementSelector}) {
      & > div {
        &[data-type="wrapper-layer"] {
          --_sf-gri-wl-vt: visible;
          --_sf-gri-wl-op: 1;
          --_sf-gri-wl-dp: block;
          --_sf-gri-wl-bw: 1px;
          z-index: 2;
        }
      }
    }
  }

  & > div {
    &[data-type="wrapper-layer"] {
      display: var(--_sf-gri-wl-dp, var(--_d-none)) !important;
      pointer-events: none;
      visibility: var(--_sf-gri-wl-vt, hidden) !important;
      opacity: var(--_sf-gri-wl-op, 0) !important;
      position: var(--_p-absolute) !important;
      inset: 0 0 0 0;
      --_sf-pr-wr-ly-br-cl: 25%;
      border: var(--_sf-gri-wl-bw) solid
        color-mix(
          in srgb,
          var(--_accent-color-2-500) var(--_sf-pr-wr-ly-br-cl),
          transparent calc(100% - var(--_sf-pr-wr-ly-br-cl))
        );
    }
    &[data-div-type="cms-grid-wrapper"] {
      // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
      padding: #{prepareMediaVariable(--_ctm-gri-lt-pg)};
      // background-color: prepareMediaVariable(--_ctm-gri-dn-bd-cr);
      // background-image: prepareMediaVariable(--_ctm-gri-dn-bd-ie);
      // background-attachment: prepareMediaVariable(--_ctm-gri-dn-bd-at);
      // background-position: prepareMediaVariable(--_ctm-gri-dn-bd-pn);
      // background-repeat: prepareMediaVariable(--_ctm-gri-dn-bd-rt);
      // background-size: prepareMediaVariable(--_ctm-gri-dn-bd-se);
      width: 100%;
      grid-area: 1/1/2/2 !important;
      height: 100%;
      // padding: var(--_ctm-mob-gri-lt-pg), var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg));
      display: var(--_d-grid);
      border-color: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-cr));
      border-style: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-se));
      border-width: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-wh));
      border-radius: var(--_hide-grid-border, prepareMediaVariable(--_ctm-gri-dn-br-rs));

      &:is(.#{$flex} > *) {
        display: var(--_d-flex) !important;
        column-gap: prepareMediaVariable(--_ctm-gri-lt-cn-gp);
        row-gap: prepareMediaVariable(--_ctm-gri-lt-rw-gp);
        flex-wrap: prepareMediaVariable(--_ctm-gri-lt-fx-wp);
        overflow: prepareMediaVariable(--_ctm-gri-lt-fx-ow);

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