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

[data-div-type="element"] {
  &[data-element-type="cart"] {
    // width: var(
    //   --_ctm-mob-ele-nw-wh-st-mx,
    //   var(
    //     --_ctm-tab-ele-nw-wh-st-mx,
    //     var(--_sf-el-wh-st-mx, calc(1% * 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)));

    // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;

    // aspect-ratio: var(
    //   --_ctm-mob-aspect-ratio,
    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
    // );

    position: relative;

    & > .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: prepareMediaVariable(--_ctm-lt-ht);
      background-color: prepareMediaVariable(--_ctm-dn-ct-cr-bd-cr);
      border-radius: prepareMediaVariable(--_ctm-dn-ct-cr-br-rs);
      border-width: prepareMediaVariable(--_ctm-dn-ct-cr-br-wh);
      border-color: prepareMediaVariable(--_ctm-dn-ct-cr-br-cr);
      border-style: prepareMediaVariable(--_ctm-dn-ct-cr-br-se);
      padding: prepareMediaVariable(--_ctm-lt-pg);
      box-shadow: prepareMediaVariable(--_ctm-dn-ct-cr-sw-ae)
        prepareMediaVariable(--_ctm-dn-ct-cr-sw-br) prepareMediaVariable(--_ctm-dn-ct-cr-sw-sd)
        prepareMediaVariable(--_ctm-dn-ct-cr-sw-cr);
    }

    .cart__section {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: var(
        --_ctm-mob-dn-ct-cr-im-gp,
        var(--_ctm-tab-dn-ct-cr-im-gp, var(--_ctm-dn-ct-cr-im-gp))
      );

      .cart__div {
        position: relative;
        display: flex;

        a {
          display: flex;
          flex-direction: column;
        }

        span {
          &.cart__button {
            display: flex;
            position: relative;
            // Reserve the icon box on the container span, not only on the inner
            // <svg>. The icon SVG is fetched async (SirvIcon), so before it
            // arrives the span would collapse to 0 and then grow when the icon
            // pops in — a layout shift (CLS) in the header. Sizing the span with
            // the SAME variable the svg uses holds the space from first paint.
            width: var(
              --_ctm-mob-dn-ct-in-in-se,
              var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
            );
            height: var(
              --_ctm-mob-dn-ct-in-in-se,
              var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
            );
            // inset: var(
            //   --_ctm-mob-dn-ct-in-in-pn-wh-ss,
            //   var(--_ctm-tab-dn-ct-in-in-pn-wh-ss, var(--_ctm-dn-ct-in-in-pn-wh-ss))
            // );
          }

          svg {
            width: var(
              --_ctm-mob-dn-ct-in-in-se,
              var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
            );
            height: var(
              --_ctm-mob-dn-ct-in-in-se,
              var(--_ctm-tab-dn-ct-in-in-se, var(--_ctm-dn-ct-in-in-se))
            );

            path {
              stroke: var(
                --_ctm-mob-dn-ct-in-in-c1,
                var(--_ctm-tab-dn-ct-in-in-c1, var(--_ctm-dn-ct-in-in-c1))
              );
              stroke-width: prepareMediaVariable(--_ctm-dn-ct-in-se-wh);
            }
          }
        }

        .badge {
          color: var(
            --_ctm-mob-dn-ct-is-ct-cr,
            var(--_ctm-tab-dn-ct-is-ct-cr, var(--_ctm-dn-ct-is-ct-cr))
          );
          font-family: var(
            --_ctm-mob-dn-ct-is-ct-ft-fy,
            var(--_ctm-tab-dn-ct-is-ct-ft-fy, var(--_ctm-dn-ct-is-ct-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-ct-is-ct-tt-tm,
            var(--_ctm-tab-dn-ct-is-ct-tt-tm, var(--_ctm-dn-ct-is-ct-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-ct-is-ct-wd-wp,
            var(--_ctm-tab-dn-ct-is-ct-wd-wp, var(--_ctm-dn-ct-is-ct-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-ct-is-ct-wd-bk,
            var(--_ctm-tab-dn-ct-is-ct-wd-bk, var(--_ctm-dn-ct-is-ct-wd-bk))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: var(
            --_ctm-mob-dn-ct-is-ct-ft-se,
            var(--_ctm-tab-dn-ct-is-ct-ft-se, var(--_ctm-dn-ct-is-ct-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-ct-is-ct-ft-wt,
            var(--_ctm-tab-dn-ct-is-ct-ft-wt, var(--_ctm-dn-ct-is-ct-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-ct-is-ct-ft-se-ic,
            var(--_ctm-tab-dn-ct-is-ct-ft-se-ic, var(--_ctm-dn-ct-is-ct-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-ct-is-ct-tt-an,
            var(--_ctm-tab-dn-ct-is-ct-tt-an, var(--_ctm-dn-ct-is-ct-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-ct-is-ct-lr-sg,
            var(--_ctm-tab-dn-ct-is-ct-lr-sg, var(--_ctm-dn-ct-is-ct-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-ct-is-ct-le-ht,
            var(--_ctm-tab-dn-ct-is-ct-le-ht, var(--_ctm-dn-ct-is-ct-le-ht))
          );
          text-decoration: var(
            --_ctm-mob-dn-ct-is-ct-ue,
            var(--_ctm-tab-dn-ct-is-ct-ue, var(--_ctm-dn-ct-is-ct-ue))
          );
          background-color: var(
            --_ctm-mob-dn-ct-is-ct-bd-cr,
            var(--_ctm-tab-dn-ct-is-ct-bd-cr, var(--_ctm-dn-ct-is-ct-bd-cr))
          );
          border-color: var(
            --_ctm-mob-dn-ct-is-ct-br-cr,
            var(--_ctm-tab-dn-ct-is-ct-br-cr, var(--_ctm-dn-ct-is-ct-br-cr))
          );
          border-style: var(
            --_ctm-mob-dn-ct-is-ct-br-se,
            var(--_ctm-tab-dn-ct-is-ct-br-se, var(--_ctm-dn-ct-is-ct-br-se))
          );
          border-width: var(
            --_ctm-mob-dn-ct-is-ct-br-wh,
            var(--_ctm-tab-dn-ct-is-ct-br-wh, var(--_ctm-dn-ct-is-ct-br-wh))
          );
          border-radius: var(
            --_ctm-mob-dn-ct-is-ct-br-rs,
            var(--_ctm-tab-dn-ct-is-ct-br-rs, var(--_ctm-dn-ct-is-ct-br-rs))
          );
          box-shadow: var(
            --_show-text-content-shadow,
            var(
                --_ctm-mob-dn-ct-is-ct-sw-ae,
                var(--_ctm-tab-dn-ct-is-ct-sw-ae, var(--_ctm-dn-ct-is-ct-sw-ae, none))
              )
              var(
                --_ctm-mob-dn-ct-is-ct-sw-br,
                var(--_ctm-tab-dn-ct-is-ct-sw-br, var(--_ctm-dn-ct-is-ct-sw-br, none))
              )
              var(
                --_ctm-mob-dn-ct-is-ct-sw-sd,
                var(--_ctm-tab-dn-ct-is-ct-sw-sd, var(--_ctm-dn-ct-is-ct-sw-sd, none))
              )
              var(
                --_ctm-mob-dn-ct-is-ct-sw-cr,
                var(--_ctm-tab-dn-ct-is-ct-sw-cr, var(--_ctm-dn-ct-is-ct-sw-cr, none))
              )
          );
          // height: 20px;
          // width: 20px;
          // Width bounds: the badge stays circular for a single digit and grows no
          // wider than the longest formatted count ("999" before it becomes "1k").
          // `width: max-content` is what makes the bounds bite -- the badge is
          // position:absolute, so without an explicit width it is sized shrink-to-fit
          // against .cart__div (and stretched edge-to-edge whenever `inset` resolves
          // to both a left and a right value), which leaves min/max-width inert.
          // Final width is clamp(20px, count + padding, 44px).
          width: max-content;
          min-width: 20px;
          max-width: 80px;
          height: max-content;
          min-height: max(20px, 1.4em);
          box-sizing: border-box;
          padding: var(
            --_ctm-mob-dn-ct-is-ct-pg,
            var(--_ctm-tab-dn-ct-is-ct-pg, var(--_ctm-dn-ct-is-ct-pg, 0px))
          );
          position: absolute;
          top: -3px !important;
          right: -7px !important;
          inset: var(
            --_ctm-mob-dn-ct-in-in-pn-wh-ss,
            var(--_ctm-tab-dn-ct-in-in-pn-wh-ss, var(--_ctm-dn-ct-in-in-pn-wh-ss))
          );
          display: flex;
          align-items: center;
          justify-content: center;
          white-space: nowrap;
          overflow: hidden;

          span {
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .cart__content {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin-left: 5px;

        a {
          display: flex;
          flex-direction: column;
        }
        .cart__text__span {
          color: var(
            --_ctm-mob-dn-mi-ct-tt-cr,
            var(--_ctm-tab-dn-mi-ct-tt-cr, var(--_ctm-dn-mi-ct-tt-cr))
          );
          font-family: var(
            --_ctm-mob-dn-mi-ct-tt-ft-fy,
            var(--_ctm-tab-dn-mi-ct-tt-ft-fy, var(--_ctm-dn-mi-ct-tt-ft-fy))
          );
          font-size: var(
            --_ctm-mob-dn-mi-ct-tt-ft-se,
            var(--_ctm-tab-dn-mi-ct-tt-ft-se, var(--_ctm-dn-mi-ct-tt-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-mi-ct-tt-ft-wt,
            var(--_ctm-tab-dn-mi-ct-tt-ft-wt, var(--_ctm-dn-mi-ct-tt-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-mi-ct-tt-ft-se-ic,
            var(--_ctm-tab-dn-mi-ct-tt-ft-se-ic, var(--_ctm-dn-mi-ct-tt-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-mi-ct-tt-tt-an,
            var(--_ctm-tab-dn-mi-ct-tt-tt-an, var(--_ctm-dn-mi-ct-tt-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-mi-ct-tt-lr-sg,
            var(--_ctm-tab-dn-mi-ct-tt-lr-sg, var(--_ctm-dn-mi-ct-tt-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-mi-ct-tt-le-ht,
            var(--_ctm-tab-dn-mi-ct-tt-le-ht, var(--_ctm-dn-mi-ct-tt-le-ht))
          );
          text-decoration: var(
            --_ctm-mob-dn-mi-ct-tt-ue,
            var(--_ctm-tab-dn-mi-ct-tt-ue, var(--_ctm-dn-mi-ct-tt-ue))
          );
          text-transform: var(
            --_ctm-mob-dn-mi-ct-tt-tt-tm,
            var(--_ctm-tab-dn-mi-ct-tt-tt-tm, var(--_ctm-dn-mi-ct-tt-tt-tm, none))
          );
          word-wrap: var(
            --_ctm-mob-dn-mi-ct-tt-wd-wp,
            var(--_ctm-tab-dn-mi-ct-tt-wd-wp, var(--_ctm-dn-mi-ct-tt-wd-wp, normal))
          );
          word-break: var(
            --_ctm-mob-dn-mi-ct-tt-wd-bk,
            var(--_ctm-tab-dn-mi-ct-tt-wd-bk, var(--_ctm-dn-mi-ct-tt-wd-bk, normal))
          );
        }

        .cart__total {
          color: var(
            --_ctm-mob-dn-mi-ct-tt-cr-dc,
            var(--_ctm-tab-dn-mi-ct-tt-cr-dc, var(--_ctm-dn-mi-ct-tt-cr-dc))
          );
          font-family: var(
            --_ctm-mob-dn-mi-ct-tt-ft-fy-dc,
            var(--_ctm-tab-dn-mi-ct-tt-ft-fy-dc, var(--_ctm-dn-mi-ct-tt-ft-fy-dc))
          );
          font-size: var(
            --_ctm-mob-dn-mi-ct-tt-ft-se-dc,
            var(--_ctm-tab-dn-mi-ct-tt-ft-se-dc, var(--_ctm-dn-mi-ct-tt-ft-se-dc))
          );
          font-weight: var(
            --_ctm-mob-dn-mi-ct-tt-ft-wt-dc,
            var(--_ctm-tab-dn-mi-ct-tt-ft-wt-dc, var(--_ctm-dn-mi-ct-tt-ft-wt-dc))
          );
          font-style: var(
            --_ctm-mob-dn-mi-ct-tt-ft-se-ic-dc,
            var(--_ctm-tab-dn-mi-ct-tt-ft-se-ic-dc, var(--_ctm-dn-mi-ct-tt-ft-se-ic-dc))
          );
          text-align: var(
            --_ctm-mob-dn-mi-ct-tt-tt-an-dc,
            var(--_ctm-tab-dn-mi-ct-tt-tt-an-dc, var(--_ctm-dn-mi-ct-tt-tt-an-dc))
          );
          letter-spacing: var(
            --_ctm-mob-dn-mi-ct-tt-lr-sg-dc,
            var(--_ctm-tab-dn-mi-ct-tt-lr-sg-dc, var(--_ctm-dn-mi-ct-tt-lr-sg-dc))
          );
          line-height: var(
            --_ctm-mob-dn-mi-ct-tt-le-ht-dc,
            var(--_ctm-tab-dn-mi-ct-tt-le-ht-dc, var(--_ctm-dn-mi-ct-tt-le-ht-dc))
          );
          text-decoration: var(
            --_ctm-mob-dn-mi-ct-tt-ue-dc,
            var(--_ctm-tab-dn-mi-ct-tt-ue-dc, var(--_ctm-dn-mi-ct-tt-ue-dc))
          );
          text-transform: var(
            --_ctm-mob-dn-mi-ct-tt-tt-tm-dc,
            var(--_ctm-tab-dn-mi-ct-tt-tt-tm-dc, var(--_ctm-dn-mi-ct-tt-tt-tm-dc, none))
          );
          word-wrap: var(
            --_ctm-mob-dn-mi-ct-tt-wd-wp-dc,
            var(--_ctm-tab-dn-mi-ct-tt-wd-wp-dc, var(--_ctm-dn-mi-ct-tt-wd-wp-dc, normal))
          );
          word-break: var(
            --_ctm-mob-dn-mi-ct-tt-wd-bk-dc,
            var(--_ctm-tab-dn-mi-ct-tt-wd-bk-dc, var(--_ctm-dn-mi-ct-tt-wd-bk-dc, normal))
          );
        }
      }
    }

    // .icon {
    //   position: relative;
    //   cursor: pointer;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;

    //   svg {
    //     width: 100%;
    //     height: 100%;
    //     max-width: 20px;
    //     max-height: 20px;
    //     // width: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));
    //     // height: var(--_ctm-dn-im-se-in-se, var(--_tst-dn-im-se-in-se));

    //     path {
    //       // stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
  // Overrides the stroke-width presentation attribute baked into the icon markup.
  stroke-width: prepareMediaVariable(--_ctm-dn-im-se-se-wh, 1.25);
    //     }
    //   }
    // }

    // .cart-count {
    //   position: absolute;
    //   top: 4px;
    //   right: 10px;
    //   background-color: #243dc6;
    //   color: white;
    //   font-size: 10px;
    //   font-weight: bold;
    //   min-width: 16px;
    //   height: 16px;
    //   border-radius: 30%;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   line-height: 1;
    //   padding: 2px;
    //   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    // }

    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    // "Show Border" switches. Each design section paints its border from CSS variables,
    // so the switch reaches the stylesheet as a data attribute and the matching
    // border-width is zeroed here. Kept at the end of the block and matched to the same
    // selector depth as the rules above — anywhere earlier and the section rules would
    // win the tie on source order.
    &[data-cart-container-border="false"] > .wrapper {
      border-width: 0;
      border-style: none;
    }
    &[data-cart-icon-border="false"] > .wrapper .cart__section .cart__button {
      border-width: 0;
      border-style: none;
    }
    &[data-cart-count-border="false"] > .wrapper .cart__section .badge {
      border-width: 0;
      border-style: none;
    }
  }
}