@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
@use "./position-module.scss" as *;
@use "./animation-control.scss" as *;
@use "./responsive-behaviour.scss" as *;
@use "./overflow-module.scss" as *;
@use "./transform-properties-module.scss" as *;

$activeElementSelector: "[data-has-clicked='true']";
$isFlexboxElementChild: ".flx > .wrapper > *";
$repeterLElement: '[data-element-type="repeater"]';
$dp: "dp_d_none";
$tb: "tb_d_none";
$mb: "mb_d_none";

$rp: (
  class: (
    #{$tb}: (
        laptop: (
          display: "none !important",
        ),
      ),
    #{$dp}: (
        desktop: (
          display: "none !important",
        ),
      ),
    #{$mb}: (
        mobile: (
          display: "none !important",
        ),
      ),
  ),
);

body {
  // color: var(--_thm-ty-p1-tt-cr);
  // font-family: var(--_thm-ty-p1-ft-fy);
  // font-size: var(--_thm-ty-p1-ft-se);
  // font-weight: var(--_thm-ty-p1-bd);
  // font-style: var(--_thm-ty-p1-ic);
  // text-align: var(--_thm-ty-p1-tt-an);
  // letter-spacing: var(--_thm-ty-p1-cr-sg);
  // line-height: var(--_thm-ty-p1-le-ht);
  // text-decoration: var(--_thm-ty-p1-ue);

  // Responsive
  // @include prepareCustomClassCSSProps($rp);
  @include prepareCustomClassCSSPropsV2($rp);

  // Animation
  @include FlexAnimationModuleStyles();

  // Position
  @include FlexPositionModuleStyles();

  // Responsive
  @include FlexElementResponsiveBehaviourStyles();

  // Overflow
  // @include FlexOverflowModuleStyles();

  // Additional Tranform Properties
  @include FlexElementTransformProps();

  // Page Styles
  &[data-iframe-body="true"],
  &[data-iframe-preview-body="true"],
  &:has(> #__next) {
    border-color: prepareMediaVariable(--_ctm-pag-dn-br-cr);
    border-style: prepareMediaVariable(--_ctm-pag-dn-br-se);
    border-width: prepareMediaVariable(--_ctm-pag-dn-br-wh);
    border-radius: prepareMediaVariable(--_ctm-pag-dn-br-rs);

    background-color: prepareMediaVariable(--_ctm-pag-dn-bd-cr);
    background-image: prepareMediaVariable(--_ctm-pag-dn-bd-ie);
    background-attachment: prepareMediaVariable(--_ctm-pag-dn-bd-at);
    background-position: prepareMediaVariable(--_ctm-pag-dn-bd-pn);
    background-position-y: prepareMediaVariable(--_ctm-pag-dn-bd-pn-y);
    background-repeat: prepareMediaVariable(--_ctm-pag-dn-bd-rt);
    background-size: prepareMediaVariable(--_ctm-pag-dn-bd-se);

    padding: prepareMediaVariable(--_ctm-pag-lt-pg, 0px);
  }
}

section {
  &[data-div-type="section"] {
    position: var(--_p-relative);
    width: 100%;
    margin: prepareMediaVariable(--_ctm-sec-lt-mn);
    flex-direction: column;
    justify-self: stretch;
    align-self: stretch;
    justify-content: center;
    --_sf-element-vt-pd: max(
      0.5px,
      0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
    );
    --_sf-element-hr-pd: max(
      0.5px,
      0.0117188 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
    );
    box-shadow: var(
      --_hide-section-shadow,
      prepareMediaVariable(--_ctm-sec-dn-sw-ae) prepareMediaVariable(--_ctm-sec-dn-sw-br)
        prepareMediaVariable(--_ctm-sec-dn-sw-sd) prepareMediaVariable(--_ctm-sec-dn-sw-cr)
    );
    border-radius: prepareMediaVariable(--_ctm-sec-dn-br-rs) !important;

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

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

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

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

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

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

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

    &:not(.#{$dp}, .#{$tb}, .#{$mb}) {
      display: var(--_d-flex) !important;
    }

    & > div {
      &[data-type="wrapper-layer"] {
        display: var(--_d-flex) !important;
        pointer-events: none;
        position: var(--_p-absolute);
        visibility: visible !important;
        inset: 0 0 0 0;
        // border-color: var(
        //   --_hide-section-border,
        //   var(--_ctm-mob-sec-dn-br-cr, var(--_ctm-tab-sec-dn-br-cr, var(--_ctm-sec-dn-br-cr)))
        // );
        border-color: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-cr));
        border-style: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-se));
        border-width: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-wh));
        border-radius: var(--_hide-section-border, prepareMediaVariable(--_ctm-sec-dn-br-rs));
      }

      &[data-div-type="cms-section-wrapper"] {
        // max-width: var(--_sf-wp-mx-wt);
        max-width: var(
          --_sf-dt-sec-mw,
          min(100%, prepareMediaVariable(--_ctm-sec-lt-wh))
        ) !important;
        // min-height: prepareMediaVariable(--_ctm-sec-lt-mn-ht);
        margin-inline: auto;
        position: var(--_p-relative);
        width: 100%;
        // padding-inline: 10px;
        // padding-block: 10px;
        padding: prepareMediaVariable(--_ctm-sec-lt-pg);
        column-gap: prepareMediaVariable(--_ctm-sec-lt-cn-gp);
        row-gap: prepareMediaVariable(--_ctm-sec-lt-rw-gp);

        &[data-vf="true"] {
          --_sf-dt-sec-mw: 100%;
        }
      }
    }
  }
}

div[data-div-type="element"] {
  position: var(--_p-relative);

  & > .wrapper {
    grid-area: 1/1/2/2 !important;

    a {
      color: inherit;
      text-decoration: none;

      &.disabled {
        opacity: 0.5;
        pointer-events: none;
      }
    }
  }

  &[data-view-state="full"] {
    width: auto;
    margin: 0;
    cursor: auto;
    justify-self: stretch !important;
    align-self: stretch !important;

    // &:not(#{$repeterLElement}) {
    // }
    &:is(#{$isFlexboxElementChild}) {
      width: 100%;
    }

    &:is(#{$activeElementSelector}) {
      & > div {
        &[data-div-type="wrapper__layer"] {
          --_sf-vt-zz: visible;
          --_sf-op-zz: 1;
        }
      }
    }

    & > .wrapper {
      height: 100%;
      width: 100%;
    }
  }

  // &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
  //   &:is([data-element-type="stack"]) {
  //     width: max(
  //       0.5px,
  //       calc(#{prepareMediaVariable(--_ctm-sta-ele-nw-wh-vl)} / 100) *
  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
  //     );
  //   }
  //   &:is([data-element-type="container"]) {
  //     width: max(
  //       0.5px,
  //       calc(#{prepareMediaVariable(--_ctm-con-ele-nw-wh-vl)} / 100) *
  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
  //     );
  //   }

  //   &:not([data-element-type="container"], [data-element-type="stack"]) {
  //     width: max(
  //       0.5px,
  //       calc(#{prepareMediaVariable(--_ctm-ele-nw-wh-vl)} / 100) *
  //         (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
  //     );
  //   }
  // }
}