/**
 * Session Cart Link Component Styles
 *
 * A Button with a count badge in its icon slot. Everything about the button
 * itself is the Button component's; only the badge is styled here.
 */

/* Left as a plain block on purpose. The Button sets `container: inline-size`
   on its own wrapper and sizes itself against it, so a shrink-wrapping root
   (inline-block, inline-flex) feeds it a width derived from its own contents:
   the button comes out at the smallest step and the label wraps. A block root
   hands it the column's real width. The button is width:fit-content, so it
   still only takes the room it needs. */
.session-cart-link {
  --scl-button-height: 64px;

  --scl-badge-size: 20px;
  --scl-badge-bg:   var(--attitude, #fa263a);
  --scl-badge-text: var(--white, #ffffff);
}

/* A fixed height, where the Button's own is fluid (clamped 44-64px by its
   container, and capped below that by the size prop). This one is a standing
   call to action on a landing page rather than a button in a layout, so it
   keeps the full height at every width. Padding and type still follow the
   size prop; only the height is pinned. */
.session-cart-link .button {
  min-height: var(--scl-button-height);
}

/* The label never wraps: a cart button broken over two lines reads as two
   things. Below roughly 240px of column the button keeps its one line and
   overruns instead, which no landing-page column reaches. */
.session-cart-link .button__label {
  white-space: nowrap;
}

/* ── Count badge ──────────────────────────────────────────────────────────
 * Sits in the button's icon slot, so it inherits the icon's placement and
 * needs no positioning of its own — which also means it cannot end up
 * overlapping the label at any button size.
 */
.session-cart-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--scl-badge-size);
  height: var(--scl-badge-size);
  padding: 0 var(--spacing-075, 6px);
  border-radius: calc(var(--scl-badge-size) / 2);
  background-color: var(--scl-badge-bg);
  color: var(--scl-badge-text);
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-weight: var(--font-weight-bold, 700);
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* An empty cart hides the badge outright (the JS sets [hidden]); the button
   then reads as a plain link, which is the honest state. */
.session-cart-link__count[hidden] {
  display: none;
}

/* ── Count for assistive tech ──────────────────────────────────────────────
 * The visible badge is inside the button's aria-hidden icon slot, so the
 * number is carried here instead. Visually hidden, never display:none — that
 * would take it out of the accessibility tree along with the live region.
 */
.session-cart-link__count-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* On an attitude surface the badge would sit pink-on-pink, so it flips to the
   trust maroon the button already uses for its text there. */
.session-cart-link--on-attitude {
  --scl-badge-bg:   var(--trust, #550a2d);
  --scl-badge-text: var(--white, #ffffff);
}