@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

$lbMain: "#cms_lt_bx_mn";
$mnwr: ".cms_lt_wr";
$es: '[data-div-type="element"]';
$le: '[data-element-type="lightboxv2"]';
$activeElementSelector: "[data-has-clicked='true']";

#{$lbMain} {
  position: var(--_p-fixed);
  inset: 0 0 0 0;
  z-index: calc(var(--_higher-zIndex) + var(--_lt-bx-zi, 1));
  --_cms-section-add-button-zIndex: var(--_higher-zIndex);
  --_cms-sl-df-zIndex: 1;
  --_cms-element-active-zIndex: calc(
    var(--_cms-section-add-button-zIndex) + var(--_cms-sl-df-zIndex) + 3
  );
  --_sf-element-vt-pd: max(
    0.5px,
    0.00625 * (var(--_cms-scaling-factor) - var(--_cms-scrollbar-width))
  );

  // &:has(#{$activeElementSelector}) {
  //   // border: 1px solid var(--_accent-color-2-500);
  // }

  & > div {
    &#{$mnwr} {
      position: var(--_p-absolute);
      inset: 0 0 0 0;
      background: var(--_sf-bg-ol-cr, rgba(0, 0, 0, 0.7));
      display: var(--_d-grid);
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;

      & > div {
        &#{$es} {
          &#{$le} {
            display: var(--_d-grid);
            grid-template-rows: 1fr;
            grid-template-columns: 1fr;
            width: calc(
              1% *
                var(
                  --_ctm-mob-lig-ele-nw-wh-vl,
                  var(--_ctm-tab-lig-ele-nw-wh-vl, var(--_ctm-lig-ele-nw-wh-vl, 30))
                )
            );
            height: var(
              --_ctm-mob-lig-lt-ht,
              var(--_ctm-tab-lig-lt-ht, var(--_ctm-lig-lt-ht, 400px))
            );
            max-width: 100%;
            max-height: 9999px;
            padding: prepareMediaVariable(--_ctm-lig-lt-pg);
            &[data-background-type="color"] {
              background-color: prepareMediaVariable(--_ctm-lig-dn-bd-cr);
            }

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

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

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

            &[data-background-type="image"] {
              background-image: prepareMediaVariable(--_ctm-lig-dn-bd-ie);
              background-attachment: prepareMediaVariable(--_ctm-lig-dn-bd-at);
              background-position: prepareMediaVariable(--_ctm-lig-dn-bd-pn);
              background-position-y: prepareMediaVariable(--_ctm-lig-dn-bd-pn-y);
              background-repeat: prepareMediaVariable(--_ctm-lig-dn-bd-rt);
              background-size: prepareMediaVariable(--_ctm-lig-dn-bd-se);
            }
            // background-color: var(
            //   --_ctm-mob-lig-dn-bd-cr,
            //   var(--_ctm-tab-lig-dn-bd-cr, var(--_ctm-lig-dn-bd-cr))
            // );
            // background-image: var(
            //   --_ctm-mob-lig-dn-bd-ie,
            //   var(--_ctm-tab-lig-dn-bd-ie, var(--_ctm-lig-dn-bd-ie))
            // );
            // background-attachment: var(
            //   --_ctm-mob-lig-dn-bd-at,
            //   var(--_ctm-tab-lig-dn-bd-at, var(--_ctm-lig-dn-bd-at))
            // );
            // background-position: var(
            //   --_ctm-mob-lig-dn-bd-pn,
            //   var(--_ctm-tab-lig-dn-bd-pn, var(--_ctm-lig-dn-bd-pn))
            // );
            // background-repeat: var(
            //   --_ctm-mob-lig-dn-bd-rt,
            //   var(--_ctm-tab-lig-dn-bd-rt, var(--_ctm-lig-dn-bd-rt))
            // );
            // background-size: var(
            //   --_ctm-mob-lig-dn-bd-se,
            //   var(--_ctm-tab-lig-dn-bd-se, var(--_ctm-lig-dn-bd-se))
            // );
            border-radius: prepareMediaVariable(--_ctm-lig-dn-br-rs, 0px);
            border-width: prepareMediaVariable(--_ctm-lig-dn-br-wh);
            border-style: prepareMediaVariable(--_ctm-lig-dn-br-se);
            border-color: prepareMediaVariable(--_ctm-lig-dn-br-cr);
            position: var(--_p-relative);

            // margin-inline-start: 35%;
            // margin-block-start: 2%;

            margin: var(--_ctm-mob-lig-lt-mn, var(--_ctm-tab-lig-lt-mn, var(--_ctm-lig-lt-mn)));

            & > div {
              &.wrapper {
                overflow-y: auto;
                scrollbar-width: none;
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}