@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$activeElementSelector: "[data-has-clicked='true']";
[data-div-type="element"] {
  &[data-element-type="container"] {
    // 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% *
    //     var(
    //       --_ctm-mob-con-ele-nw-wh-vl,
    //       var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl)),
    //       auto
    //     )
    // );
    // width: 100%;
    // height: var(--_ctm-con-lt-ht);

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

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

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

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

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

    width: calc(
      1% *
        var(
          --_ctm-mob-con-ele-nw-wh-vl,
          var(--_ctm-tab-con-ele-nw-wh-vl, var(--_ctm-con-ele-nw-wh-vl, auto))
        )
    );
    margin: var(
      --_ctm-mob-con-lt-mn,
      var(--_ctm-tab-con-lt-mn, var(--_ctm-con-lt-mn, var(--_ctm-lt-mn)))
    );

    &[data-show-border="true"] {
      & > div {
        &.wrapper {
          border-color: var(
            --_ctm-mob-con-dn-br-cr,
            var(--_ctm-tab-con-dn-br-cr, var(--_ctm-con-dn-br-cr))
          );
          border-style: var(
            --_ctm-mob-con-dn-br-se,
            var(--_ctm-tab-con-dn-br-se, var(--_ctm-con-dn-br-se))
          );
          border-width: var(
            --_ctm-mob-con-dn-br-wh,
            var(--_ctm-tab-con-dn-br-wh, var(--_ctm-con-dn-br-wh))
          );
        }
      }
    }
    &[data-show-shadow="true"] {
      // box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-con-dn-sw-ae, var(--_ctm-dn-sw-ae)))
      //   var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-con-dn-sw-br, var(--_ctm-dn-sw-br)))
      //   var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-con-dn-sw-sd, var(--_ctm-dn-sw-sd)))
      //   var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-con-dn-sw-cr, var(--_ctm-dn-sw-cr)));
      box-shadow: prepareMediaVariable(--_ctm-con-dn-sw-ae, 0 0)
        prepareMediaVariable(--_ctm-con-dn-sw-br, 0) prepareMediaVariable(--_ctm-con-dn-sw-sd, 0)
        prepareMediaVariable(--_ctm-con-dn-sw-cr, transparent);
    }

    &[data-view-state="full"] {
      & > .wrapper {
        grid-template-rows: auto !important;
      }
    }
    & > div {
      &.wrapper {
        width: 100%;
        grid-template-columns: 100% !important;
        min-height: prepareMediaVariable(--_ctm-con-lt-mn-ht);
        padding: var(--_ctm-mob-con-lt-pg, var(--_ctm-tab-con-lt-pg, var(--_ctm-con-lt-pg)));
        border-radius: var(
          --_ctm-mob-con-dn-br-rs,
          var(--_ctm-tab-con-dn-br-rs, var(--_ctm-con-dn-br-rs))
        );
        // background-color: var(
        //   --_ctm-mob-con-dn-bd-cr,
        //   var(--_ctm-tab-con-dn-bd-cr, var(--_ctm-con-dn-bd-cr))
        // );
        // background-image: var(
        //   --_ctm-mob-con-dn-bd-ie,
        //   var(--_ctm-tab-con-dn-bd-ie, var(--_ctm-con-dn-bd-ie))
        // );
        // background-attachment: var(
        //   --_ctm-mob-con-dn-bd-at,
        //   var(--_ctm-tab-con-dn-bd-at, var(--_ctm-con-dn-bd-at))
        // );
        // background-position: var(
        //   --_ctm-mob-con-dn-bd-pn,
        //   var(--_ctm-tab-con-dn-bd-pn, var(--_ctm-con-dn-bd-pn))
        // );
        // background-repeat: var(
        //   --_ctm-mob-con-dn-bd-rt,
        //   var(--_ctm-tab-con-dn-bd-rt, var(--_ctm-con-dn-bd-rt))
        // );
        // background-size: var(
        //   --_ctm-mob-con-dn-bd-se,
        //   var(--_ctm-tab-con-dn-bd-se, var(--_ctm-con-dn-bd-se))
        // );
      }
    }

    // &[data-view-state="full"] {
    //   width: auto;
    //   margin: 0;
    //   justify-self: stretch !important;
    //   align-self: stretch !important;
    //   cursor: auto;
    //   &:is(#{$activeElementSelector}) {
    //     & > div {
    //       &[data-div-type="wrapper__layer"] {
    //         --_sf-vt-zz: visible;
    //         --_sf-op-zz: 1;
    //       }
    //     }
    //   }
    // }
  }
}