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

$overflowSelector: ".flex__overflow";

[data-div-type="element"] {
  &[data-element-type="quotaDetails"] {
    // 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));
    // Reads the percentage the left/right resize handles write, same as FAQ. Without
    // this the handles (and the Layout > Width input) drag a value nothing consumes.
    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)))
      )
    );
    // Floor for the width above: the two items plus their icons stop reading as a row
    // below this, and dragging past it only produced a squeezed, wrapped box.
    min-width: 300px !important;
    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: auto;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    .quota__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%;
      // width: fit-content;
      height: auto;
      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)));
        // Design > Widget Style > alignment, falling back to the Layout panel's own
        // alignment so elements set up before the design control existed keep theirs.
        justify-content: prepareMediaVariable(
          --_ctm-dn-wt-se-hl-at,
          prepareMediaVariable(--_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"] {
          // Divider > Shape Size and Shape Color are the only two controls the panel
          // offers for the item: Size is the marker's diameter for circle and square
          // and the rule's thickness for the plain line, Color paints all three. The
          // keys the panel used to expose (Divider Height / Divider Color) stay as
          // fallbacks so a divider styled before the change keeps its look.
          //
          // The `-dr-dr-` doubling is not a typo — the first is the `divider` node,
          // the second the `divider…` property name. These two vars were written with
          // only one, which is exactly why neither control did anything.
          $shapeSize: prepareMediaVariable(
            --_ctm-dn-dr-dr-se-se,
            prepareMediaVariable(--_ctm-dn-dr-dr-wh, 1px)
          );
          $shapeColor: prepareMediaVariable(
            --_ctm-dn-dr-dr-se-cr,
            prepareMediaVariable(--_ctm-dn-dr-dr-cr, #e4e7ec)
          );

          .product__list__item {
            position: relative;
            // The rule is a pseudo-element and takes no space of its own, so a wide one
            // grew back over the item beside it — see dividerGapReserve in functions.scss.
            &:not(:last-child) {
              @include dividerGapReserve($shapeSize, right);
            }
            &:not(:last-child)::after {
              content: "";
              width: $shapeSize;
              height: 100%;
              position: absolute;
              right: dividerGapOffset(--_ctm-lt-im-sg, $shapeSize);
              background-color: $shapeColor;
            }

            // Divider item (Divider -> Item Style). The rule above spans the width it was
            // given starting half the item spacing past the item, so its centre sits at
            // -(gap/2) - (width/2) — the marker is pinned there and translated half its
            // own width back, leaving it centred on the rule.
            .divider__marker {
              position: absolute;
              top: 50%;
              right: dividerMarkerOffset(--_ctm-lt-im-sg, $shapeSize);
              transform: translate(50%, -50%);
              display: flex;
              align-items: center;
              justify-content: center;
              z-index: 1;

              // 8px rather than the rule's thickness when Shape Size is absent: a
              // marker falling back to a hairline would read as missing.
              &[data-shape="circle"],
              &[data-shape="square"] {
                width: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
                height: prepareMediaVariable(--_ctm-dn-dr-dr-se-se, 8px);
                background-color: $shapeColor;
              }

              &[data-shape="circle"] {
                border-radius: 50%;
              }

              // Paints the widget background behind itself, so the rule breaks
              // around the icon instead of striking through it.
              &[data-shape="icon"] {
                padding-block: 2px;
                background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr, #ffffff);
              }

              .icon {
                display: flex;

                svg {
                  width: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);
                  height: prepareMediaVariable(--_ctm-dn-dr-in-se, 12px);

                  // Colour whether the icon is drawn with strokes or fills (skipping
                  // parts explicitly set to "none") — the default "dot" is filled,
                  // most others are stroked.
                  &[stroke]:not([stroke="none"]),
                  [stroke]:not([stroke="none"]) {
                    stroke: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
                    // Overrides the stroke-width presentation attribute baked into the icon markup.
                    stroke-width: prepareMediaVariable(--_ctm-dn-dr-se-wh, 1.25);
                  }
                  &[fill]:not([fill="none"]),
                  [fill]:not([fill="none"]) {
                    fill: prepareMediaVariable(--_ctm-dn-dr-in-c1, #e4e7ec);
                  }
                }
              }
            }

            // The marker is rendered inside every item; only the ones that carry a
            // rule show it, so it can never trail off the end of the row.
            &:last-child .divider__marker {
              display: none;
            }
          }

          // A shape or icon marker REPLACES the rule rather than sitting on it, so the
          // rule is drawn only while the separator is the plain "divider".
          &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
            display: none;
          }
        }
        .product__list__item {
          display: flex;
          align-items: center;
          gap: 4px;
          // Flex items default to min-width:auto, so they refuse to shrink below
          // their text width. Narrowing the element used to push this row outside
          // the element box instead of reflowing it inside.
          min-width: 0;

          .svg_icon {
            display: flex;
          }
        }
        .quota__left {
          .count {
            // padding-inline: var(--_sf-cd-gp);
            // No `white-space: nowrap` here: it stopped the text reflowing when the
            // element is narrowed, and it would also defeat the line clamp below,
            // which needs the text to wrap before it can restrict it to N lines.
            min-width: 0;
            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))
            );
            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))
            );
            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, none))
            );
            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, normal))
            );
            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, normal))
            );

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }
          }
          .label {
            // padding-inline: var(--_sf-cd-gp);
            // No `white-space: nowrap` here: it stopped the text reflowing when the
            // element is narrowed, and it would also defeat the line clamp below,
            // which needs the text to wrap before it can restrict it to N lines.
            min-width: 0;
            color: var(
              --_ctm-mob-dn-qa-lt-cr-dc-dc,
              var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
            );
            font-family: var(
              --_ctm-mob-dn-qa-lt-ft-fy-dc,
              var(--_ctm-tab-dn-qa-lt-ft-fy-dc, var(--_ctm-dn-qa-lt-ft-fy-dc))
            );
            font-size: var(
              --_ctm-mob-dn-qa-lt-ft-se-dc,
              var(--_ctm-tab-dn-qa-lt-ft-se-dc, var(--_ctm-dn-qa-lt-ft-se-dc))
            );
            font-weight: var(
              --_ctm-mob-dn-qa-lt-ft-wt-dc,
              var(--_ctm-tab-dn-qa-lt-ft-wt-dc, var(--_ctm-dn-qa-lt-ft-wt-dc))
            );
            font-style: var(
              --_ctm-mob-dn-qa-lt-ft-se-ic-dc,
              var(--_ctm-tab-dn-qa-lt-ft-se-ic-dc, var(--_ctm-dn-qa-lt-ft-se-ic-dc))
            );
            text-align: var(
              --_ctm-mob-dn-qa-lt-tt-an-dc,
              var(--_ctm-tab-dn-qa-lt-tt-an-dc, var(--_ctm-dn-qa-lt-tt-an-dc))
            );
            letter-spacing: var(
              --_ctm-mob-dn-qa-lt-lr-sg-dc,
              var(--_ctm-tab-dn-qa-lt-lr-sg-dc, var(--_ctm-dn-qa-lt-lr-sg-dc))
            );
            line-height: var(
              --_ctm-mob-dn-qa-lt-le-ht-dc,
              var(--_ctm-tab-dn-qa-lt-le-ht-dc, var(--_ctm-dn-qa-lt-le-ht-dc-dc))
            );
            text-decoration: var(
              --_ctm-mob-dn-qa-lt-ue-dc,
              var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
            );
            text-transform: var(
              --_ctm-mob-dn-qa-lt-tt-tm-dc,
              var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
            );
            word-wrap: var(
              --_ctm-mob-dn-qa-lt-wd-wp-dc,
              var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
            );
            word-break: var(
              --_ctm-mob-dn-qa-lt-wd-bk-dc,
              var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
            );

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
            }
          }
          .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; 1 keeps the icon as authored when nothing is set.
                stroke-width: var(
                  --_ctm-mob-dn-qa-lt-se-wh,
                  var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
                );
              }
            }
          }
        }
        .days__left {
          .count {
            // padding-inline: var(--_sf-cd-gp);
            // No `white-space: nowrap` here: it stopped the text reflowing when the
            // element is narrowed, and it would also defeat the line clamp below,
            // which needs the text to wrap before it can restrict it to N lines.
            min-width: 0;
            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))
            );
            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))
            );
            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, none))
            );
            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, normal))
            );
            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, normal))
            );

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }
          }
          .label {
            // padding-inline: var(--_sf-cd-gp);
            // No `white-space: nowrap` here: it stopped the text reflowing when the
            // element is narrowed, and it would also defeat the line clamp below,
            // which needs the text to wrap before it can restrict it to N lines.
            min-width: 0;
            color: var(
              --_ctm-mob-dn-ds-lt-cr-dc-dc,
              var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
            );
            font-family: var(
              --_ctm-mob-dn-ds-lt-ft-fy-dc,
              var(--_ctm-tab-dn-ds-lt-ft-fy-dc, var(--_ctm-dn-ds-lt-ft-fy-dc))
            );
            font-size: var(
              --_ctm-mob-dn-ds-lt-ft-se-dc,
              var(--_ctm-tab-dn-ds-lt-ft-se-dc, var(--_ctm-dn-ds-lt-ft-se-dc))
            );
            font-weight: var(
              --_ctm-mob-dn-ds-lt-ft-wt-dc,
              var(--_ctm-tab-dn-ds-lt-ft-wt-dc, var(--_ctm-dn-ds-lt-ft-wt-dc))
            );
            font-style: var(
              --_ctm-mob-dn-ds-lt-ft-se-ic-dc,
              var(--_ctm-tab-dn-ds-lt-ft-se-ic-dc, var(--_ctm-dn-ds-lt-ft-se-ic-dc))
            );
            text-align: var(
              --_ctm-mob-dn-ds-lt-tt-an-dc,
              var(--_ctm-tab-dn-ds-lt-tt-an-dc, var(--_ctm-dn-ds-lt-tt-an-dc))
            );
            letter-spacing: var(
              --_ctm-mob-dn-ds-lt-lr-sg-dc,
              var(--_ctm-tab-dn-ds-lt-lr-sg-dc, var(--_ctm-dn-ds-lt-lr-sg-dc))
            );
            line-height: var(
              --_ctm-mob-dn-ds-lt-le-ht-dc,
              var(--_ctm-tab-dn-ds-lt-le-ht-dc, var(--_ctm-dn-ds-lt-le-ht-dc-dc))
            );
            text-decoration: var(
              --_ctm-mob-dn-ds-lt-ue-dc,
              var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
            );
            text-transform: var(
              --_ctm-mob-dn-ds-lt-tt-tm-dc,
              var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
            );
            word-wrap: var(
              --_ctm-mob-dn-ds-lt-wd-wp-dc,
              var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
            );
            word-break: var(
              --_ctm-mob-dn-ds-lt-wd-bk-dc,
              var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
            );

            &#{$overflowSelector} {
              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
            }
          }
          .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; 1 keeps the icon as authored when nothing is set.
                stroke-width: var(
                  --_ctm-mob-dn-ds-lt-se-wh,
                  var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
                );
              }
            }
          }
        }
      }
    }
  }
}