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

[data-div-type="element"] {
  &[data-element-type="brandName"] {
    // 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, var(--_sf-nw-wh)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // The Height control. brandDescription and brandCode below already had this; only
    // brandName was missing it, so its own stylesheet never applied the height at all
    // and the wrapper's `min-height: inherit` had nothing to inherit. It happened to
    // work because brandName is *also* declared in product-basic-elements.scss, which
    // does set it — relying on that cross-file declaration is not something to keep.
    min-height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
    // height: var(--_ctm-lt-ht, var(--_tst-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)))
    // );
    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));

    & > .wrapper {
      width: 100%;
      // Follow the elements own height so the styled box (background, border, shadow)
      // matches the Height set in layout instead of only hugging the text.
      min-height: inherit;
      // height: 100%;
      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));

      border-color: var(
        --_show-border,
        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
      );
      border-style: var(
        --_show-border,
        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)))
      );
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-show-border="false"] {
      --_show-border: none;
    }
    // .text-element {
    //   // background: #6d96e4;
    //   // padding: 10px;
    //   // font-weight: 600;
    //   // color: rgba(75, 69, 70, 1);
    //   // cursor: pointer;
    // }
    .text-element {
      // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      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: var(--_ctm-lt-ht, var(--_tst-lt-ht));
      // border-color: var(
      //   --_show-border,
      //   var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
      // );
      // border-style: var(
      //   --_show-border,
      //   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)))
      // );
      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)));
      text-transform: var(--_ctm-mob-dn-tt-tm, var(--_ctm-tab-dn-tt-tm, var(--_ctm-dn-tt-tm)));
      &.flex__overflow {
        white-space: normal;
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }
      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 box guard. The line-height control stores a fixed length (its default is
      // 1rem), so it does not grow with the font size — at a large size the glyphs end
      // up taller than their own line box and spill out of it, which is what makes the
      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
      // while still honouring any larger value the user sets.
      line-height: max(
        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
        1em
      );
      word-wrap: prepareMediaVariable(--_ctm-dn-wd-wp);
      word-break: prepareMediaVariable(--_ctm-dn-wd-bk);

      text-decoration: var(
        --_sf-hr-tt-dn,
        var(
          --_ctm-mob-dn-dt-se-ue,
          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
        )
      );
      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);
      }
    }
  }
  &[data-element-type="brandDescription"] {
    // 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, var(--_sf-nw-wh)))
          )
      )
    );
    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: var(--_ctm-lt-ht, var(--_tst-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)))
    // );

    & > .wrapper {
      width: 100%;
      // Follow the elements own height so the styled box (background, border, shadow)
      // matches the Height set in layout instead of only hugging the text.
      min-height: inherit;
      // 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(
        --_show-border,
        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
      );
      border-style: var(
        --_show-border,
        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)))
      );
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-show-border="false"] {
      --_show-border: none;
    }
    // .text-element {
    //   background: #6d96e4;
    //   padding: 10px;
    //   font-weight: 600;
    //   color: rgba(75, 69, 70, 1);
    // }
    .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%;
      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));

      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)));
      word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
      word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
      &.flex__overflow {
        white-space: normal;
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }
      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 box guard. The line-height control stores a fixed length (its default is
      // 1rem), so it does not grow with the font size — at a large size the glyphs end
      // up taller than their own line box and spill out of it, which is what makes the
      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
      // while still honouring any larger value the user sets.
      line-height: max(
        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
        1em
      );
      text-decoration: var(
        --_sf-hr-tt-dn,
        var(
          --_ctm-mob-dn-dt-se-ue,
          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
        )
      );
      scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
      text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
      &[data-flip-x="true"] {
        transform: scaleX(-1);
      }
      &[data-flip-y="true"] {
        transform: scaleY(-1);
      }
      &#{$overflowSelector} {
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }
    }
  }
  &[data-element-type="brandCode"] {
    // 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, var(--_sf-nw-wh)))
          )
      )
    );
    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)))
    // );

    & > .wrapper {
      width: 100%;
      // Follow the elements own height so the styled box (background, border, shadow)
      // matches the Height set in layout instead of only hugging the text.
      min-height: inherit;
      // 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(
        --_show-border,
        var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)))
      );
      border-style: var(
        --_show-border,
        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)))
      );
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-show-border="false"] {
      --_show-border: none;
    }
    // .text-element {
    //   // background: #6d96e4;
    //   // padding: 10px;
    //   // font-weight: 600;
    //   // color: rgba(75, 69, 70, 1);
    // }
    .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%;
      // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));

      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)));
      word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
      word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
      &.flex__overflow {
        white-space: normal;
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }
      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 box guard. The line-height control stores a fixed length (its default is
      // 1rem), so it does not grow with the font size — at a large size the glyphs end
      // up taller than their own line box and spill out of it, which is what makes the
      // text look cut off. max(..., 1em) keeps the box at least as tall as the text
      // while still honouring any larger value the user sets.
      line-height: max(
        var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht, 1em))),
        1em
      );
      text-decoration: var(
        --_sf-hr-tt-dn,
        var(
          --_ctm-mob-dn-dt-se-ue,
          var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue, var(--_ctm-dn-ue)))
        )
      );
      scale: var(--_ctm-mob-dn-zm-ie, var(--_ctm-tab-dn-zm-ie, var(--_ctm-dn-zm-ie)));
      text-transform: prepareMediaVariable(--_ctm-dn-tt-tm);
      &[data-flip-x="true"] {
        transform: scaleX(-1);
      }
      &[data-flip-y="true"] {
        transform: scaleY(-1);
      }

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