@use "./functions.scss" as *;

// The allocation HEADER's quota details. Same rules as allocations-quota-details.scss
// (which styles the ones inside the product cards), rebound to the header's own
// design.allocation.quotaDetails.* variable paths so the two can be styled apart.
// @imported inside allocationDetails.scss within the .showcase__title scope.

$overflowSelector: ".flex__overflow";

// Text Transform (with the word wrap/break pair the panel groups with it) and Text
// Overflow for one text node. $suffix is "-dc" for the Label blocks, which write the
// *Desc keys. Declared here rather than reusing the allocationDetails mixins so this
// file stays self-contained, matching how it already redeclares the rebound vars.
@mixin ahqd-text-controls($base, $suffix: "", $clampVar: --_sf-line-clamp) {
  text-transform: prepareMediaVariable(#{$base}-tt-tm#{$suffix}, none);
  word-wrap: prepareMediaVariable(#{$base}-wd-wp#{$suffix}, normal);
  word-break: prepareMediaVariable(#{$base}-wd-bk#{$suffix}, normal);

  // The clamp needs the text to wrap first, so it undoes the `nowrap` above it.
  &#{$overflowSelector} {
    white-space: normal;
    @include restrictToLinesShow(#{var($clampVar, 1)});
  }
}

.quota__details__element {
  background-color: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr))
  );
  padding: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-pg,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-pg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-pg))
  );
  display: flex;
  flex-direction: column;
  --_sf-gp: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-lt-im-sg,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-lt-im-sg, var(--_ctm-dn-an-qa-ds-qa-ds-lt-im-sg, 16px))
  );
  row-gap: var(--_sf-gp);
  // Embedded in an allocation card, not free-standing like the Quota Details element
  // itself: `fit-content` let the row size to its text and spill past the card, so it
  // is pinned to the card instead and the row below reflows within it.
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  border-color: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-cr))
  );
  border-style: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-se,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-se, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-se))
  );
  border-width: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-wh))
  );
  border-radius: var(
    --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs,
    var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-br-rs))
  );
  box-shadow: var(
      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae,
      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-ae))
    )
    var(
      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br,
      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-br))
    )
    var(
      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd,
      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-sd))
    )
    var(
      --_ctm-mob-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr,
      var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-sw-cr))
    );

  .product__hilights {
    display: flex;
    align-items: center;
    // Design > Widget Style > alignment, falling back to the Layout panel's own
    // alignment so cards set up before the design control existed keep theirs.
    justify-content: prepareMediaVariable(
      --_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-hl-at,
      prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-lt-hl-at)
    );
    gap: var(--_sf-gp);
    width: 100%;
    height: 100%;
    // Pinned to the card above, so the two stats wrap onto a second line when the
    // card is too narrow for both instead of running past its edge.
    flex-wrap: wrap;
    min-width: 0;

    &[data-show-dividers="true"] {
      // See quota-details.scss: Shape Size and Shape Color are the item's only two
      // controls, Size measuring the marker's diameter or the rule's thickness. The
      // `-dr-dr-` doubling is the `divider` node followed by the `divider…` property
      // name — the shape vars were written with only one, which is why neither
      // control did anything.
      $shapeSize: prepareMediaVariable(
        --_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-se,
        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
      );
      $shapeColor: prepareMediaVariable(
        --_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-cr,
        prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-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(var(--_sf-gp, 0px), $shapeSize);
          background-color: $shapeColor;
        }

        // Divider item (Divider -> Item Style). Same geometry as the standalone
        // element: the rule's centre sits at -(gap/2) - (width/2) from the item's right
        // edge, so the marker is pinned there and translated half its own width back.
        .divider__marker {
          position: absolute;
          top: 50%;
          right: dividerMarkerOffset(var(--_sf-gp, 0px), $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-an-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
            height: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
            background-color: $shapeColor;
          }

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

          &[data-shape="icon"] {
            padding-block: 2px;
            background-color: prepareMediaVariable(
              --_ctm-dn-an-qa-ds-qa-ds-dn-wt-se-bd-cr,
              #ffffff
            );
          }

          .icon {
            display: flex;

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

              &[stroke]:not([stroke="none"]),
              [stroke]:not([stroke="none"]) {
                stroke: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-c1, #e4e7ec);
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-se-wh, 1.25);
              }
              &[fill]:not([fill="none"]),
              [fill]:not([fill="none"]) {
                fill: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-dr-in-c1, #e4e7ec);
              }
            }
          }
        }

        // Rendered inside every item; only the ones carrying a rule show it.
        &: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 — the same guard the standalone element carries.
      min-width: 0;

      .svg_icon {
        display: flex;
      }
    }

    .quota__left {
      .count {
        // No `white-space: nowrap` here: it stopped the text reflowing when the card
        // is narrowed, which forced the two stats onto separate lines instead of
        // letting them shrink and stay on one. Matches the standalone element.
        min-width: 0;
        color: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-cr,
          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr))
        );
        font-family: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy)
          )
        );
        text-transform: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm)
          )
        );
        word-wrap: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp)
          )
        );
        word-break: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk)
          )
        );
        font-size: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se)
          )
        );
        font-weight: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt)
          )
        );
        font-style: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
          )
        );
        letter-spacing: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg)
          )
        );
        line-height: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht)
          )
        );
        text-decoration: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue,
          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue))
        );
        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt);
      }
      .label {
        // No `white-space: nowrap` here: it stopped the text reflowing when the card
        // is narrowed, which forced the two stats onto separate lines instead of
        // letting them shrink and stay on one. Matches the standalone element.
        min-width: 0;
        color: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-cr-dc)
          )
        );
        font-family: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
          )
        );
        text-transform: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc)
          )
        );
        word-wrap: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc)
          )
        );
        word-break: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc)
          )
        );
        font-size: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
          )
        );
        font-weight: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
          )
        );
        font-style: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
          )
        );
        letter-spacing: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
          )
        );
        line-height: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
          )
        );
        text-decoration: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-ue-dc)
          )
        );
        @include ahqd-text-controls(
          --_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt,
          "-dc",
          --_sf-line-clamp-desc
        );
      }
      .icon {
        display: flex;
        svg {
          width: var(
            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
            var(
              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
            )
          );
          height: var(
            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
            var(
              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se,
              var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-se)
            )
          );
          path {
            stroke: var(
              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
              var(
                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1,
                var(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-in-c1)
              )
            );
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-qa-lt-se-wh, 1.25);
          }
        }
      }
    }

    .days__left {
      .count {
        // No `white-space: nowrap` here: it stopped the text reflowing when the card
        // is narrowed, which forced the two stats onto separate lines instead of
        // letting them shrink and stay on one. Matches the standalone element.
        min-width: 0;
        color: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-cr,
          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr))
        );
        font-family: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy)
          )
        );
        text-transform: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm)
          )
        );
        word-wrap: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp)
          )
        );
        word-break: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk)
          )
        );
        font-size: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se)
          )
        );
        font-weight: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt)
          )
        );
        font-style: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
          )
        );
        letter-spacing: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg)
          )
        );
        line-height: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht)
          )
        );
        text-decoration: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue,
          var(--_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue, var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue))
        );
        @include ahqd-text-controls(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt);
      }
      .label {
        // No `white-space: nowrap` here: it stopped the text reflowing when the card
        // is narrowed, which forced the two stats onto separate lines instead of
        // letting them shrink and stay on one. Matches the standalone element.
        min-width: 0;
        color: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-cr-dc)
          )
        );
        font-family: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
          )
        );
        text-transform: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc)
          )
        );
        word-wrap: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc)
          )
        );
        word-break: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc)
          )
        );
        font-size: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
          )
        );
        font-weight: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
          )
        );
        font-style: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
          )
        );
        letter-spacing: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
          )
        );
        line-height: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
          )
        );
        text-decoration: var(
          --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
          var(
            --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc,
            var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-ue-dc)
          )
        );
        @include ahqd-text-controls(
          --_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt,
          "-dc",
          --_sf-line-clamp-desc
        );
      }
      .icon {
        display: flex;
        svg {
          width: var(
            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
            var(
              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
            )
          );
          height: var(
            --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
            var(
              --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se,
              var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-se)
            )
          );
          path {
            stroke: var(
              --_ctm-mob-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
              var(
                --_ctm-tab-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1,
                var(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-in-c1)
              )
            );
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-an-qa-ds-qa-ds-dn-ds-lt-se-wh, 1.25);
          }
        }
      }
    }
  }
}