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

$ie: '[contenteditable="true"]';
$re: '[data-cms-tool="cms-element-resizer"]';
$dblclk: '[data-cms-tt-ee-dbl-clkd="true"]';

@use "./functions.scss" as *;

[data-div-type="element"] {
  &[data-element-type="text"] {
    // 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));
    // 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);
    // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
    // height: ;
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    [data-div-type="wrapper__layer"] {
      position: var(--_p-absolute);
      inset: 0 0 0 0;
      border: 1px solid var(--_accent-color-2-500);
      z-index: 2;
      pointer-events: none;
      visibility: var(--_sf-vt-bm-zz, hidden);
      opacity: var(--_sf-op-bm-zz, 0);
    }

    &#{$dblclk} {
      --_sf-op-bm-zz: 1;
      --_sf-vt-bm-zz: visible;
      #{$re} {
        display: none !important;
      }
    }

    [contentEditable="true"] {
      white-space: normal;
      unicode-bidi: plaintext;
    }

    & > .wrapper {
      width: 100%;
      // min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
      min-height: prepareMediaVariable(--_ctm-lt-ht);
      // min-height: 50px;
      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
      padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
      border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
      border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
      border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
      border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
      box-shadow: var(
        --_show-shadow,
        var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
          var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
      );
      // height: 100%;

      #{$ie} {
        &:focus {
          outline: none;
          border: none;
        }
      }
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    .text-element {
      // background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
      // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
      // border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
      // border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
      // border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
      // border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
      // box-shadow: var(
      //   --_show-shadow,
      //   var(--_ctm-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-dn-sw-br, var(--_tst-dn-sw-br))
      //     var(--_ctm-dn-sw-sd, var(--_tst-dn-sw-sd)) var(--_ctm-dn-sw-cr, var(--_tst-dn-sw-cr))
      // );
      display: flex;
      flex-direction: column;
      --_sf-gp: 16px;
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
      row-gap: var(--_sf-gp);
      width: 100%;
      // height: 100%;

      // transform: scale(var(--_ctm-dn-zm-ie));
      scale: var(--_ctm-dn-zm-ie);
      &[data-flip-x="true"] {
        transform: scaleX(-1);
      }
      &[data-flip-y="true"] {
        transform: scaleY(-1);
      }
    }
  }
}