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

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

[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-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-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__v2"] {
      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;
    }

    &[data-haslink="true"] {
      cursor: pointer;
    }

    &>.wrapper {
      width: 100%;
      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_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-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      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(--_show-border,
          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))));
      // height: 100%;

      #{$ie} {
        &:focus {
          outline: none;
          border: none;
        }
      }
    }

    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    &[data-show-border="false"] {
      --_show-border: 0;
    }

    .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);
      }

      *,
      .et-tt {

        &,
        * {
          color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
          font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
          font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
          font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
          font-style: var(--_ctm-mob-dn-ft-se-ic,
              var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic)));
          text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
          letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
          line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
          text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
          text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
          word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
          word-break: prepareMediaVariable(--_ctm-dn-wd-bk);
        }

      }

      &#{$overflowSelector} {
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }
    }
  }
}