/**
 * @file
 * FND-6 / DONI-711 — icon sizing and the one rotation utility.
 *
 * The sprite container itself is `.sprite`, defined once in css/base/a11y.css
 * (FND-5 / DONI-708). Never redefine it here.
 *
 * Colour is NOT set here. Every symbol in the sprite uses `currentColor`, so
 * an icon inherits `color` from whatever contains it. Setting `fill` or
 * `color` on `.icon` would take that away.
 */

.icon {
  /* Sized by custom property so a caller can override from CSS or from the
     Twig `size` parameter without a specificity fight. Figma draws every icon
     in a 24x24 box. */
  inline-size: var(--icon-size, 24px);
  block-size: var(--icon-size, 24px);

  /* `flex: none` keeps an icon from being squashed inside a flex row, which is
     where most of these live (buttons, link rows, the ISI tray toggle). */
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

/**
 * The mobile menu's close control.
 *
 * Figma builds `Icon type=Close` (4042:490) from the SAME `Union` plus vector
 * rotated -135deg. This utility reproduces that on `icon-plus` so the close
 * control and the open control are provably one asset.
 *
 * The GLYPH does not overflow — a rotated cross is 15.05/24 of its box, so the
 * ink shrinks. The SVG ELEMENT's layout box does grow, to size × √2 (a 24px
 * icon lays out as 34px). Budget for that in flex and grid parents.
 *
 * Rendering is identical to `#icon-close`, which bakes the same rotation in.
 * Measured: both produce a 70×71px ink box at a 120px render.
 */
.icon--rot-135 {
  transform: rotate(-135deg);
}