@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$vtl: "[data-element-type='mega-menu'] > .vtl";
[data-div-type="element"] {
  &[data-element-type="mgContainer"] {
    // 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-mgcon-ele-nw-wh-vl, auto));
    // width: 100%;
    // height: var(--_ctm-con-lt-ht);
    // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));

    // width: 100%;
    // background: var(--_ctm-mgcon-dn-bd-cr);
    // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
    &:is(#{$vtl} *) {
      --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
    }
    width: var(--_sf-bm-gls-wdth-vl, 100vw);
    min-height: var(--_ctm-mgcon-lt-mn-ht);
    margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);

    & > div {
      &.wrapper {
        // width: 100%;
        width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
        margin-inline: auto;
        height: 100%;
        padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));

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

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

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

        &:is([data-gradient-type="Radial Gradient"] > *).wrapper {
          background-image: radial-gradient(
            circle at var(--_sf-mgcon-gradient-position),
            var(--_sf-mgcon-gradient-start-color) var(--_sf-mgcon-gradient-start-position),
            var(--_sf-mgcon-gradient-end-color) var(--_sf-mgcon-gradient-end-position)
          );
        }
        &:is([data-background-type="image"] > *).wrapper {
          background-image: prepareMediaVariable(--_ctm-mgcon-dn-bd-ie);
          background-attachment: prepareMediaVariable(--_ctm-mgcon-dn-bd-at);
          background-position: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn);
          background-position-y: prepareMediaVariable(--_ctm-mgcon-dn-bd-pn-y);
          background-repeat: prepareMediaVariable(--_ctm-mgcon-dn-bd-rt);
          background-size: prepareMediaVariable(--_ctm-mgcon-dn-bd-se);
        }

        // background-color: var(
        //   --_ctm-mob-mgcon-dn-bd-cr,
        //   var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
        // );
        // background-image: var(
        //   --_ctm-mob-mgcon-dn-bd-ie,
        //   var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
        // );
        // background-attachment: var(
        //   --_ctm-mob-mgcon-dn-bd-at,
        //   var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
        // );
        // background-position: var(
        //   --_ctm-mob-mgcon-dn-bd-pn,
        //   var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
        // );
        // background-repeat: var(
        //   --_ctm-mob-mgcon-dn-bd-rt,
        //   var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
        // );
        // background-size: var(
        //   --_ctm-mob-mgcon-dn-bd-se,
        //   var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
        // );
        border-radius: var(
          --_ctm-mob-mgcon-dn-br-rs,
          var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
        );
        border-color: var(
          --_ctm-mob-mgcon-dn-br-cr,
          var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
        );
        border-style: var(
          --_ctm-mob-mgcon-dn-br-se,
          var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
        );
        border-width: var(
          --_ctm-mob-mgcon-dn-br-wh,
          var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
        );
        box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
          prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
          prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
        // box-shadow: var(
        //   --_hover-show-shadow,
        //   var(
        //     --_sf-hr-bx-sw,
        //     var(
        //       --_show-shadow,
        //       var(
        //           --_ctm-mob-dn-dt-se-sw-ae,
        //           var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
        //         )
        //         var(
        //           --_ctm-mob-dn-dt-se-sw-br,
        //           var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
        //         )
        //         var(
        //           --_ctm-mob-dn-dt-se-sw-sd,
        //           var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
        //         )
        //         var(
        //           --_ctm-mob-dn-dt-se-sw-cr,
        //           var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
        //         )
        //     )
        //   )
        // );
      }
    }
  }
}