/**
 * Icon Framework — em-based, font-size-driven.
 *
 * One attribute activates the framework: [data-icon-style="boxed"] on
 * the wrapper. Inside, the svg must declare width="1em" height="1em".
 * That's the whole trick — box and svg are both sized in `em`, so
 * changing the wrapper's font-size rebalances the entire chip at a
 * perfectly locked ratio.
 *
 * Naming follows Kevin Geary's ACSS convention:
 *   [data-icon]                → mark an svg as framework-managed (naked)
 *   [data-icon-style="boxed"]  → wrap with tinted padded box
 *   [data-icon-style="naked"]  → explicit naked (same as default)
 *   [data-icon-size="s|m|l"]   → size override (changes font-size only)
 *
 * Tokens (tokens.css → icon framework block):
 *   --icon-chip-ratio      box-to-svg ratio (house constant — 2.2)
 *   --icon-chip-size-{s,m,l}  wrapper font-size per size variant
 *   --icon-chip-radius     corner radius
 *   --icon-stroke          line-icon stroke weight
 *
 * To adjust every chip on the site: change --icon-chip-ratio or the
 * default --icon-chip-size-m in tokens.css. Single source of truth.
 *
 * ACCESSIBILITY RULE:
 * Decorative boxed icons (the default case) MUST carry aria-hidden="true"
 * on the wrapper element. They sit next to visible text that already
 * carries the meaning, so screen readers must skip them. Example:
 *
 *   <span class="..." data-icon-style="boxed" aria-hidden="true">
 *     <svg width="1em" height="1em"><use href="#icon-eye"/></svg>
 *   </span>
 *
 * If an icon is INFORMATIVE (conveys meaning on its own, no adjacent
 * text label), drop aria-hidden and give the svg a role="img" + <title>.
 * That case does not currently exist anywhere in this codebase.
 *
 * @package Vimta
 */

@layer components {

  /* ── NAKED ICON ────────────────────────────────────────────────────
     Any svg marked with [data-icon] gets a stable size and stroke.
     Use this when you want the raw svg with no wrapper. */
  [data-icon] {
    flex-shrink: 0;
    inline-size: var(--icon-chip-size-m);
    block-size: var(--icon-chip-size-m);
    stroke-width: var(--icon-stroke);
  }


  /* ── BOXED ICON ────────────────────────────────────────────────────
     The wrapper carries font-size; box dimensions are em-based so they
     scale with it. The svg inside is 1em × 1em so it scales too.

     align-self: flex-start prevents vertical stretching when the
     wrapper is a child of a flex-row parent. */
  [data-icon-style="boxed"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    flex-shrink: 0;
    font-size: var(--icon-chip-size-m);
    inline-size: calc(1em * var(--icon-chip-ratio));
    block-size: calc(1em * var(--icon-chip-ratio));
    border-radius: var(--icon-chip-radius);
    /* background + color inherited from parent variant class */
  }

  /* Svg / img inside a boxed wrapper sizes to 1em. Combined with the
     wrapper's font-size, this locks the icon-to-box ratio forever. */
  [data-icon-style="boxed"] > svg,
  [data-icon-style="boxed"] > img,
  [data-icon-style="boxed"] [data-icon] {
    inline-size: 1em;
    block-size: 1em;
    stroke-width: var(--icon-stroke);
    flex-shrink: 0;
    object-fit: contain;
  }


  /* ── SIZE VARIANTS ─────────────────────────────────────────────────
     Size is just a font-size change on the wrapper. Because everything
     inside is em-based, the box and svg both scale together at the
     locked ratio. */
  [data-icon-size="s"] { font-size: var(--icon-chip-size-s); }
  [data-icon-size="l"] { font-size: var(--icon-chip-size-l); }

  /* Applied to naked icons (no wrapper) the size tokens still work
     because [data-icon] reads them directly. */
  [data-icon][data-icon-size="s"] {
    inline-size: var(--icon-chip-size-s);
    block-size: var(--icon-chip-size-s);
  }

  [data-icon][data-icon-size="l"] {
    inline-size: var(--icon-chip-size-l);
    block-size: var(--icon-chip-size-l);
  }


  /* ── NAKED OVERRIDE ────────────────────────────────────────────────
     Explicit opt-out from boxing when a parent applies boxed globally. */
  [data-icon-style="naked"] {
    padding: 0;
    background: transparent;
    border-radius: 0;
    inline-size: var(--icon-chip-size-m);
    block-size: var(--icon-chip-size-m);
  }

}