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

[data-div-type="element"] {
  &[data-element-type="code"] {
    display: var(--_d-flex);
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // 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: ;
    // 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)))
    // );

    & > .wrapper {
      width: 100%;
      min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
      // height: 100%;

      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(--_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="false"] {
      --_show-shadow: none;
    }

    .code-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%;
      height: 100%;

      // 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)));
      &[data-flip-x="true"] {
        transform: scaleX(-1);
      }
      &[data-flip-y="true"] {
        transform: scaleY(-1);
      }
    }
  }
}