@use "sass:map";
@use "sass:list";

@use "./functions.scss" as *;
$resizerOn: "[data-cms-element-resizer='true']";
$dndOn: "[data-cms-new-element-dragging-v2='true']";
$fullViewOn: '[data-view-state="full"]';
$isFlexboxElementChild: ".flx > .wrapper > *";

[data-div-type="element"] {
  &[data-element-type="image"],
  &[data-element-type="brandImage"],
  &[data-element-type="categoryImage"],
  &[data-element-type="productBrandImage"] {
    &:has(a) {
      cursor: pointer;
    }
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));s
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    // margin: var(--_ctm-lt-mn, --_tst-lt-mn);
    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
    // height: ;
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);

    &:has([class*="crop__main"]) {
      // overflow: clip;
      overflow: visible;

      & > .wrapper {
        visibility: hidden;
        opacity: 0;
      }
    }
    // width: prepareMediaVariable(--_ctm-lt-wh);
    &:not(#{$resizerOn}, #{$dndOn}, #{$fullViewOn}) {
      height: prepareMediaVariable(--_ctm-lt-ht) !important;
    }
    // &:not([data-element-type="image"]) {
    // }

    --_aspect-ratio: calc(
      1 *
        (
          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
        )
    );

    &#{$fullViewOn} {
      &:not(#{$isFlexboxElementChild}) {
        aspect-ratio: 1/0.01;
      }
      & > .wrapper {
        // The element trades its fixed height for an aspect-ratio here, so the
        // wrapper cannot keep tracking --_ctm-lt-ht.
        height: 100%;
        & > div {
          height: 100%;
        }
      }
      img {
        height: 100%;
        object-fit: cover;
      }
    }

    &[data-cms-element-resizer="true"] {
      // height: var(--_ctm-lt-ht);
      width: auto;
      img {
        // width: 100%;
        height: 100%;
      }
    }

    :is(:not([data-iframe-body="true"] *)) {
      & > .wrapper {
        overflow: clip;
      }
    }

    & > .wrapper {
      width: 100%;
      // Padding, border and shadow below are painted on this box, so it has to
      // match the element instead of sizing to the image. Without a definite
      // border-box height the border lands outside the element's fixed height
      // and the top/bottom edges get clipped; without border-box the width grows
      // past the element and the outline sits wider than the image.
      // 100% rather than --_ctm-lt-ht: while resizing, dragging or in full view the
      // element drops its own height, and a wrapper still pinned to the layout
      // height kept a short box around a taller picture, so the image spilled over
      // whatever sat below it on the canvas. Following the element keeps this box
      // definite whenever the element has a height, and lets the two grow together
      // when it does not.
      height: 100%;
      box-sizing: border-box;
      // overflow: clip;
      rotate: calc(var(--_ctm-dn-re) * 1deg);

      // FlexAnchorTag renders an <a> and CategoryImage adds a click <div> between
      // this wrapper and the image, both height:auto by default. That left the
      // image's own `height: 100%` with nothing definite to resolve against, so it
      // fell back to the picture's natural size and escaped the box — 167px of logo
      // in a 30px brand image. `:has` keeps this off the builder resizer, which
      // carries no image.
      :is(a, div):has(.image-element) {
        display: block;
        height: 100%;
      }

      &:is(:not(:has([class*="crop__main"]) *)) {
        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
        background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
        border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
        border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
        border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
        border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
        box-shadow: var(
          --_show-shadow,
          var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
            var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
            var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
            var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
        );
        // &[data-show-shadow] {
        // }

        // transform: scale(var(--_ctm-dn-zm-ie));
        scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
        rotate: calc(var(--_ctm-dn-re) * 1deg);
        overflow: hidden;
      }
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    // .text-element {
    //   // background: #6d96e4;
    //   // padding: 10px;
    //   // font-weight: 600;
    //   // color: rgba(75, 69, 70, 1);
    //   width: 100%;
    //   height: 100%;
    // }
    .image-element,
    .text-element {
      display: flex;
      flex-direction: column;
      --_sf-gp: 16px;
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
      row-gap: var(--_sf-gp);
      width: 100%;
      // Fills the wrapper's content box, so padding and border inset the image
      // instead of stacking on top of the element height.
      height: 100%;
      // border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
      // height: 100%;
      // &:is(:not(:has([class*="crop__main"]) *)) {
      //   padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      //   background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
      //   border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
      //   border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
      //   border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
      //   border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
      //   &[data-show-shadow] {
      //     box-shadow: var(
      //       --_show-shadow,
      //       var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
      //         var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
      //         var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
      //         var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)))
      //     );
      //   }

      //   // transform: scale(var(--_ctm-dn-zm-ie));
      //   scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
      //   rotate: calc(var(--_ctm-dn-re) * 1deg);
      // }
      transition: transform 0.3s ease-in-out;

      &:hover {
        &[data-on-hover="Zoom Out"] {
          transform: scale(0.9998);
        }
        &[data-on-hover="Zoom In"] {
          transform: scale(1.08);
        }
      }
    }

    .image__fallback__contain {
      object-fit: contain !important;
    }
    // .image-element:hover {
    //   padding: 30px;
    // }
  }
}