/*
 * Stock traffic light - the per-channel availability list (StockTrafficLight module, and the
 * imbaa-shop-tweaks fallback list, which uses the same markup).
 *
 * The component lives here rather than in a theme so it looks the same wherever the list is
 * rendered: product cards, the product page, cart, mini-cart and the checkout overview. Themes
 * keep only placement (where the block sits in their grid). Theme variables are used when present,
 * with plain fallbacks otherwise.
 */
ul.stock-block {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  row-gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 960px) {
  ul.stock-block {
    flex-wrap: nowrap;
    min-width: 247px;
  }
}

ul.stock-block .stock-status {
  display: flex;
  align-items: center;
  align-self: flex-start;
  column-gap: 3px;
  margin: 0;
  font-size: var(--font-size-xxs, 12px);
  line-height: var(--font-size-xxs, 12px);
}

ul.stock-block .stock-status:not(:last-child) {
  padding: 0 6px 0 0;
}

ul.stock-block.instock circle { fill: #85B945; }
ul.stock-block.backorder circle { fill: orange; }
ul.stock-block.out-of-stock circle { fill: red; }

/*
 * The same dot where the inline SVG cannot go: WooCommerce's cart templates pass the line name
 * through wp_kses_post(), which strips <svg>. Sized like bullet-point.svg (10px circle).
 */
ul.stock-block .stock-status:not(:has(svg))::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #85B945;
}
ul.stock-block.backorder .stock-status:not(:has(svg))::before { background: orange; }
ul.stock-block.out-of-stock .stock-status:not(:has(svg))::before { background: red; }

/* Cart, mini-cart and checkout overview: under the line's name, allowed to wrap in narrow cells. */
.woocommerce-cart-form ul.stock-block,
.woocommerce-mini-cart ul.stock-block,
.widget_shopping_cart ul.stock-block,
.woocommerce-checkout-review-order-table ul.stock-block {
  flex-wrap: wrap;
  min-width: 0;
  margin-top: 4px;
}

/* WooCommerce's stock text is emptied while the traffic light is on; do not leave its box behind. */
p.stock:empty {
  display: none;
}