/* Stock Urgency — what is left, said in the colour of the news.
 *
 * No script. The state is worked out in Liquid and lands as a class, so the
 * right words in the right colour are there on the first paint — which matters
 * for a line whose whole job is to be believed.
 *
 * Four palettes live here rather than in the schema. A merchant who wants the
 * stock level to speak for itself gets green, amber, red and blue without
 * filling in twelve colour boxes; one who wants their own brand fills them in
 * and the Liquid sends the active state's colours as properties, which win.
 */

.pb-stk {
  font-family: inherit;
  margin-block: var(--pb-stk-st, 0) var(--pb-stk-sb, 0);
  text-align: var(--pb-stk-a, start);
}

/* Built-in palettes. Each is only a starting point: anything the Liquid sends
   as a custom property overrides it, because the property is read first. */
.pb-stk--in { --pb-stk-fg: #15803d; --pb-stk-bg: #f0fdf4; --pb-stk-dot: #22c55e; }
.pb-stk--low { --pb-stk-fg: #92400e; --pb-stk-bg: #fffbeb; --pb-stk-dot: #f59e0b; }
.pb-stk--out { --pb-stk-fg: #991b1b; --pb-stk-bg: #fef2f2; --pb-stk-dot: #ef4444; }
.pb-stk--soon { --pb-stk-fg: #1e40af; --pb-stk-bg: #eff6ff; --pb-stk-dot: #3b82f6; }

.pb-stk__line {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  gap: 0.6em;
  color: var(--pb-stk-fg);
  font-size: var(--pb-stk-fs, 14px);
  line-height: 1.35;
  text-align: start;
}

.pb-stk--bold .pb-stk__line { font-weight: 600; }

/* Chip and bar carry the panel; minimal is the words and the dot alone. */
.pb-stk--chip .pb-stk__line,
.pb-stk--bar .pb-stk__line {
  background: var(--pb-stk-bg);
  padding: var(--pb-stk-py, 8px) var(--pb-stk-px, 14px);
  border-radius: var(--pb-stk-r, 999px);
}
.pb-stk--bar .pb-stk__line { display: flex; width: 100%; border-radius: var(--pb-stk-r, 8px); }

/* The border is mixed from the dot, so a merchant who changes one colour does
   not have to remember the other, and it stays in key whatever they choose. */
.pb-stk--dotted .pb-stk__line { border: 1px dashed color-mix(in srgb, var(--pb-stk-dot) 55%, transparent); }
.pb-stk--solid .pb-stk__line { border: 1px solid color-mix(in srgb, var(--pb-stk-dot) 45%, transparent); }

.pb-stk--center { --pb-stk-a: center; }
.pb-stk--end { --pb-stk-a: end; }
/* A full-width bar is as wide as its parent whatever the alignment, so the
   alignment has to move what is inside it rather than the bar itself. */
.pb-stk--bar.pb-stk--center .pb-stk__line { justify-content: center; }
.pb-stk--bar.pb-stk--end .pb-stk__line { justify-content: flex-end; }

/* ── the dot ─────────────────────────────────────────────────────────── */

/* The halo is a spread shadow rather than a ring element, so it costs no
   markup and never takes part in the layout. */
.pb-stk__dot {
  flex: 0 0 auto;
  width: var(--pb-stk-ds, 10px);
  height: var(--pb-stk-ds, 10px);
  margin: calc(var(--pb-stk-ds, 10px) * 0.42);
  border-radius: 50%;
  background: var(--pb-stk-dot);
  box-shadow: 0 0 0 calc(var(--pb-stk-ds, 10px) * 0.42) color-mix(in srgb, var(--pb-stk-dot) 26%, transparent);
}

.pb-stk--pulse .pb-stk__dot { animation: pb-stk-pulse 1.8s ease-out infinite; }
@keyframes pb-stk-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pb-stk-dot) 55%, transparent); }
  70% { box-shadow: 0 0 0 calc(var(--pb-stk-ds, 10px) * 0.9) transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-stk--pulse .pb-stk__dot { animation: none; }
}

.pb-stk__hint {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}