/*
 * Stockline stock line: product pages, the settings preview and the product dialog.
 *
 * Table of contents
 *   1. Stock line
 *   2. Colour
 *   3. Badge style
 *   4. Theme icons
 */

/* ==========================================================================
   1. Stock line
   ========================================================================== */

.stockline { display: flex; align-items: center; gap: .4em; }
.stockline__icon { display: inline-flex; flex: none; }
.stockline__icon svg { width: 1.15em; height: 1.15em; }

/* End 1. Stock line */

/* ==========================================================================
   2. Colour
   ========================================================================== */

/* --stockline-color comes from a stockline--color-{hex} class, whose rule is added with the
   stylesheet (Renderer) or, in wp-admin, by stockline-render.js. */

/* Beats WooCommerce's own .woocommerce div.product p.stock colours, but only when a colour is set. */
p.stock.stockline--colored,
.woocommerce div.product p.stock.stockline--colored { color: var(--stockline-color); }

/* End 2. Colour */

/* ==========================================================================
   3. Badge style
   ========================================================================== */

.stockline--badge { display: inline-flex; padding: .3em .8em; border-radius: 999px; font-size: .9em; font-weight: 600; }
.stockline--badge.stockline--colored { background: color-mix(in srgb, var(--stockline-color) 12%, transparent); }
.stockline--badge:not(.stockline--colored) { background: rgba(0, 0, 0, .06); }

/* End 3. Badge style */

/* ==========================================================================
   4. Theme icons
   ========================================================================== */

/* Themes that draw their own icon before the stock line (e.g. Storefront's font icons): one icon is
   enough. The second selector outranks theme rules scoped to the product page. */
.stock.stockline:has(> .stockline__icon)::before,
.woocommerce div.product p.stock.stockline:has(> .stockline__icon)::before { content: none; display: none; }

/* End 4. Theme icons */