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

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

    --_aspect-ratio: calc(
      1 *
        (
          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
        )
    );
    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
    // height: var(--_ctm-lt-ht);
    // height: ;
    // height: auto;
    // 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-element-sub-child="true"] {
    //   // width: max(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))));
    // }

    & > .wrapper {
      width: 100%;
      height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    .QuickInventoryCheck__details__element {
      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))
      );
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      display: flex;
      flex-direction: column;
      --_sf-gp: var(
        --_ctm-mob-lt-im-sg,
        var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
      );
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
      row-gap: var(--_sf-gp);
      width: 100%;
      height: 100%;
      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)))
      );

      .product__hilights {
        display: flex;
        align-items: var(--_ctm-mob-lt-wt-at, var(--_ctm-tab-lt-wt-at, var(--_ctm-lt-wt-at)));
        justify-content: var(--_ctm-mob-lt-hl-at, var(--_ctm-tab-lt-hl-at, var(--_ctm-lt-hl-at)));
        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
        width: 100%;

        height: 100%;

        &[data-show-dividers="true"] {
          .product__list__item {
            position: relative;
            // 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.
            &:not(:last-child) {
              @include dividerGapReserve(--_ctm-dn-dr-dr-wh, right);
            }
            &:not(:last-child)::after {
              content: "";
              width: var(
                --_ctm-mob-dn-dr-dr-wh,
                var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
              );
              height: 100%;
              position: absolute;
              right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-dr-dr-wh);
              background-color: var(
                --_ctm-mob-dn-dr-dr-cr,
                var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
              );
            }
          }
        }
        .product__list__item {
          display: flex;
          align-items: center;
          gap: 4px;

          .svg_icon {
            display: flex;
          }
        }
        .quota__left {
          .count {
            // padding-inline: var(--_sf-cd-gp);
            color: var(
              --_ctm-mob-dn-qa-lt-cr,
              var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
            );
            font-family: var(
              --_ctm-mob-dn-qa-lt-ft-fy,
              var(--_ctm-tab-dn-qa-lt-ft-fy, var(--_ctm-dn-qa-lt-ft-fy))
            );
            text-transform: var(
              --_ctm-mob-dn-qa-lt-tt-tm,
              var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm))
            );
            word-wrap: var(
              --_ctm-mob-dn-qa-lt-wd-wp,
              var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp))
            );
            word-break: var(
              --_ctm-mob-dn-qa-lt-wd-bk,
              var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk))
            );
            font-size: var(
              --_ctm-mob-dn-qa-lt-ft-se,
              var(--_ctm-tab-dn-qa-lt-ft-se, var(--_ctm-dn-qa-lt-ft-se))
            );
            font-weight: var(
              --_ctm-mob-dn-qa-lt-ft-wt,
              var(--_ctm-tab-dn-qa-lt-ft-wt, var(--_ctm-dn-qa-lt-ft-wt))
            );
            font-style: var(
              --_ctm-mob-dn-qa-lt-ft-se-ic,
              var(--_ctm-tab-dn-qa-lt-ft-se-ic, var(--_ctm-dn-qa-lt-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-qa-lt-tt-an,
              var(--_ctm-tab-dn-qa-lt-tt-an, var(--_ctm-dn-qa-lt-tt-an))
            );
            letter-spacing: var(
              --_ctm-mob-dn-qa-lt-lr-sg,
              var(--_ctm-tab-dn-qa-lt-lr-sg, var(--_ctm-dn-qa-lt-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-qa-lt-le-ht,
              var(--_ctm-tab-dn-qa-lt-le-ht, var(--_ctm-dn-qa-lt-le-ht-dc))
            );
            text-decoration: var(
              --_ctm-mob-dn-qa-lt-ue,
              var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
            );
          }
          .icon {
            display: var(--_sf-show-icon-ff, flex);
            svg {
              width: var(
                --_ctm-mab-dn-qa-lt-in-se,
                var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
              );
              height: var(
                --_ctm-mob-dn-qa-lt-in-se,
                var(--_ctm-tab-dn-qa-lt-in-se, var(--_ctm-dn-qa-lt-in-se))
              );
              path {
                stroke: var(
                  --_ctm-mob-dn-qa-lt-in-c1,
                  var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
                );
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-qa-lt-se-wh, 1.25);
              }
            }
          }
        }
        .days__left {
          .count {
            // padding-inline: var(--_sf-cd-gp);
            color: var(
              --_ctm-mob-dn-ds-lt-cr,
              var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
            );
            font-family: var(
              --_ctm-mob-dn-ds-lt-ft-fy,
              var(--_ctm-tab-dn-ds-lt-ft-fy, var(--_ctm-dn-ds-lt-ft-fy))
            );
            text-transform: var(
              --_ctm-mob-dn-ds-lt-tt-tm,
              var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm))
            );
            word-wrap: var(
              --_ctm-mob-dn-ds-lt-wd-wp,
              var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp))
            );
            word-break: var(
              --_ctm-mob-dn-ds-lt-wd-bk,
              var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk))
            );
            font-size: var(
              --_ctm-mob-dn-ds-lt-ft-se,
              var(--_ctm-tab-dn-ds-lt-ft-se, var(--_ctm-dn-ds-lt-ft-se))
            );
            font-weight: var(
              --_ctm-mob-dn-ds-lt-ft-wt,
              var(--_ctm-tab-dn-ds-lt-ft-wt, var(--_ctm-dn-ds-lt-ft-wt))
            );
            font-style: var(
              --_ctm-mob-dn-ds-lt-ft-se-ic,
              var(--_ctm-tab-dn-ds-lt-ft-se-ic, var(--_ctm-dn-ds-lt-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-ds-lt-tt-an,
              var(--_ctm-tab-dn-ds-lt-tt-an, var(--_ctm-dn-ds-lt-tt-an))
            );
            letter-spacing: var(
              --_ctm-mob-dn-ds-lt-lr-sg,
              var(--_ctm-tab-dn-ds-lt-lr-sg, var(--_ctm-dn-ds-lt-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-ds-lt-le-ht,
              var(--_ctm-tab-dn-ds-lt-le-ht, var(--_ctm-dn-ds-lt-le-ht-dc))
            );
            text-decoration: var(
              --_ctm-mob-dn-ds-lt-ue,
              var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
            );
          }
          .icon {
            display: var(--_sf-show-icon-ff, flex);
            svg {
              width: var(
                --_ctm-mab-dn-ds-lt-in-se,
                var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
              );
              height: var(
                --_ctm-mob-dn-ds-lt-in-se,
                var(--_ctm-tab-dn-ds-lt-in-se, var(--_ctm-dn-ds-lt-in-se))
              );
              path {
                stroke: var(
                  --_ctm-mob-dn-ds-lt-in-c1,
                  var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
                );
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-ds-lt-se-wh, 1.25);
              }
            }
          }
        }
      }
    }
  }
}