@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$es: '[data-div-type="element"]';
$ss: '[data-element-type="stack"]';
$dp: "dp_d_none";
$tb: "tb_d_none";
$mb: "mb_d_none";

$rp: (
  "#{$es}#{$ss}:not(.#{$mb})": (
    mobile: (
      display: var(--_d-grid),
    ),
  ),
  "#{$es}#{$ss}:not(.#{$tb})": (
    tablet: (
      display: var(--_d-grid),
    ),
  ),
  "#{$es}#{$ss}:not(.#{$dp})": (
    desktop: (
      display: var(--_d-grid),
    ),
  ),
);

body {
  @include prepareCustomClassCSSProps($rp);
}

#{$es} {
  &#{$ss} {
    // min-width: var(--_sf-sta-nw-wh) !important;
    // min-height: var(--_ctm-sta-lt-ht, 100px) !important;
    min-width: 30px;
    // min-height: 100px;
    margin: prepareMediaVariable(--_ctm-sta-lt-mn);
    // display: var(--_d-grid);
    // background-color: prepareMediaVariable(--_ctm-sta-dn-bd-cr);
    // background-image: prepareMediaVariable(--_ctm-sta-dn-bd-ie);
    // background-attachment: prepareMediaVariable(--_ctm-sta-dn-bd-at);
    // background-position: prepareMediaVariable(--_ctm-sta-dn-bd-pn);
    // background-repeat: prepareMediaVariable(--_ctm-sta-dn-bd-rt);
    // background-size: prepareMediaVariable(--_ctm-sta-dn-bd-se);

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

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

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

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

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

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

    &[data-show-boxshadow="true"] {
      box-shadow: var(
        --_hide-grid-shadow,
        prepareMediaVariable(--_ctm-sta-dn-sw-ae) prepareMediaVariable(--_ctm-sta-dn-sw-br)
          prepareMediaVariable(--_ctm-sta-dn-sw-sd) prepareMediaVariable(--_ctm-sta-dn-sw-cr)
      );
    }
    border-radius: prepareMediaVariable(--_ctm-sta-dn-br-rs);
    grid-template-columns: 100%;

    // &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
    //   display: var(--_d-grid);
    // }

    &.vtl {
      // width: var(--_sf-sta-nw-wh, auto);
      min-height: 30px;
      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
      min-width: 30px;
      & > .wrapper {
        flex-direction: column;
        width: 100%;
        // height: 100%;
        // justify-content: var(--_ctm-sta-lt-jy-ct);
        // align-items: var(--_ctm-sta-lt-an-is);
        align-items: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
      }
    }
    &.hrz {
      width: calc(1% * #{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)});
      // width: max-content;
      // min-width: var(--_sf-sta-nw-wh) !important;
      // min-width: 100px !important;
      // width: max-content;
      &.hsc {
        min-height: 10px;
      }
      &.dnhsc {
        min-height: 25px;
      }
      // height: var(--_ctm-sta-lt-ht, 100px);
      // width: var(--_sf-sta-nw-wh, auto);
      & > .wrapper {
        width: 100%;
        // width: 100%;
        height: 100%;
        flex-direction: row;
        // justify-content: var(--_ctm-sta-lt-an-is);
        align-items: prepareMediaVariable(--_ctm-sta-lt-an-is);
        justify-content: prepareMediaVariable(--_ctm-sta-lt-jy-ct);
      }
    }

    & > div {
      &.wrapper {
        // width: 100%;
        padding: prepareMediaVariable(--_ctm-sta-lt-pg);
        display: var(--_d-flex);
        gap: prepareMediaVariable(--_ctm-sta-lt-im-gp);

        // border-color: var(
        //   --_hide-grid-border,
        //   var(--_ctm-sta-dn-br-cr, var(--_tst-dn-dt-se-br-cr))
        // );
        // border-style: var(
        //   --_hide-grid-border,
        //   var(--_ctm-sta-dn-br-se, var(--_tst-dn-dt-se-br-se))
        // );
        // border-width: var(
        //   --_hide-grid-border,
        //   var(--_ctm-sta-dn-br-wh, var(--_tst-dn-dt-se-br-wh))
        // );
        // border-radius: var(--_ctm-sta-dn-br-rs, var(--_tst-dn-dt-se-br-rs));
      }
    }
  }
}