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

[data-div-type="element"] {
  &[data-element-type="productHighlights"] {
    // 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)));
    // 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%;
      // height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-overflow-items="Scroll"] {
      .horizontal {
        width: 100%;
        overflow-x: auto;
        .item {
          width: 100%;
          flex-shrink: 0;
        }
      }
      .vertical {
        overflow-y: auto;
        max-height: 30%;
      }
    }
    .text-element {
      color: #333;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
      margin-bottom: 6px;
    }
    .highlights__container {
      background-color: var(
        --_ctm-mob-dn-wt-se-bd-cr,
        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
      );

      border-color: var(
        --_ctm-mob-dn-wt-se-br-cr,
        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-wt-se-br-se,
        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-wt-se-br-wh,
        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
      );

      border-radius: var(
        --_ctm-mob-dn-wt-se-br-rs,
        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
      );

      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
      );

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      // Must stay lowercase to match `<div className="stack">` in the ProductHighlights
      // element. Class selectors are case-sensitive in standards mode, so the old `.stacK`
      // matched nothing on the storefront and took this whole block down with it.
      // The renderer emits `class="stack"`. This block used to read `.stacK`, so every
      // rule under it — the item box (Item Style fill/border/radius/shadow), the title
      // typography and the horizontal/vertical/grid layouts — never matched anything.
      .stack {
        display: flex;
        flex-direction: column;
        gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);

        .item {
          width: prepareMediaVariable(--_ctm-lt-im-wh);
          height: prepareMediaVariable(--_ctm-lt-im-ht);

          position: relative;
          img {
            object-fit: cover;
            display: block;
            height: 100%;
            width: 100%;
            box-sizing: border-box;

            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));

            background-color: var(
              --_ctm-mob-dn-im-se-bd-cr,
              var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
            );

            border-color: var(
              --_ctm-mob-dn-im-se-br-cr,
              var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
            );

            border-style: var(
              --_ctm-mob-dn-im-se-br-se,
              var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
            );

            border-width: var(
              --_ctm-mob-dn-im-se-br-wh,
              var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
            );

            border-radius: var(
              --_ctm-mob-dn-im-se-br-rs,
              var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
            );

            box-shadow: var(
              --_show-shadow,
              var(
                  --_ctm-mob-dn-im-se-sw-ae,
                  var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae))
                )
                var(
                  --_ctm-mob-dn-im-se-sw-br,
                  var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
                )
                var(
                  --_ctm-mob-dn-im-se-sw-sd,
                  var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
                )
                var(
                  --_ctm-mob-dn-im-se-sw-cr,
                  var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
                )
            );
          }
        }
        .items__container {
          &[data-show-divider="true"] {
            &[data-flex-direction="row"] {
              // The divider is a pseudo-element and takes no space of its own, so a thick
              // one grew back over the item beside it — see dividerGapReserve in functions.scss.
              .item:not(:last-child) {
                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
              }
              .item:not(:last-child)::before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0; /* For full height divider */
                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
                width: var(
                  --_ctm-mob-dn-wt-se-dr-wt,
                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
                ); /* Divider thickness */
                background-color: var(
                  --_ctm-mob-dn-wt-se-dr-cr,
                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
                ); /* Divider color */
              }
            }
            &[data-flex-direction="column"] {
              .item:not(:last-child) {
                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
              }
              .item:not(:last-child)::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
                height: var(
                  --_ctm-mob-dn-wt-se-dr-wt,
                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
                );
                background-color: var(
                  --_ctm-mob-dn-wt-se-dr-cr,
                  var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
                );
              }
            }
          }
        }

        .title {
          color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
          font-family: var(
            --_ctm-mob-dn-wt-se-ft-fy,
            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-wt-se-tt-tm,
            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-wt-se-wd-wp,
            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-wt-se-wd-bk,
            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
          );
          font-size: var(
            --_ctm-mob-dn-wt-se-ft-se,
            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-wt-se-ft-wt,
            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-wt-se-ft-se-ic,
            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-wt-se-tt-an,
            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-wt-se-lr-sg,
            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-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 look cut off. max(..., 1em) keeps
          // the box at least as tall as the text while still honouring a larger value.
          line-height: max(
            var(
              --_ctm-mob-dn-wt-se-le-ht,
              var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht, 1em))
            ),
            1em
          );
          text-decoration: var(
            --_ctm-mob-dn-wt-se-ue,
            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
          );
          padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);

          // Text Overflow is a `controls` property, not a CSS one, so it cannot travel as
          // a variable — the renderer adds `.flex__overflow` and publishes the line count
          // as `--_sf-line-clamp`.
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
        }
        .horizontal {
          display: flex;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
          .item {
            flex-shrink: 0;
          }

          &[data-overflow-items="Wrap"] {
            flex-wrap: wrap;
          }
          &[data-overflow-items="Scroll"] {
            width: 100%;
            overflow-x: auto;
          }
          &[data-overflow-items="Hidden"] {
            overflow-x: hidden;
          }

          &[items-content-alignement="right"] {
            justify-content: flex-end;
          }
          &[items-content-alignement="left"] {
            justify-content: flex-start;
          }
          &[items-content-alignement="center"] {
            justify-content: center;
          }
        }
        .vertical {
          display: flex;
          flex-direction: column;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
          height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);

          &[data-overflow-items="Scroll"] {
            overflow-y: auto;
          }
          &[data-overflow-items="Hidden"] {
            overflow-y: hidden;
          }

          &[items-content-alignement="right"] {
            align-items: flex-end;
          }
          &[items-content-alignement="left"] {
            align-items: flex-start;
          }
          &[items-content-alignement="center"] {
            align-items: center;
          }
        }
        .grid {
          display: grid;
          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
          grid-template-columns: repeat(
            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
            minmax(auto, 1fr)
          );
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
          &[data-overflow-items="Scroll"] {
            overflow-y: auto;
          }
          &[data-overflow-items="Hidden"] {
            overflow-y: hidden;
          }
          margin: 0px;
          .item {
            width: auto;
          }
        }
      }
    }
  }
}