/* === RB ICON =============================================================
   Wrapper emitted by icon() (php/utils/icons.php). The box tracks the
   surrounding font-size, so an icon sits on the text baseline at whatever
   size its context uses — pass ['size' => '2rem'] to break out of that.

   Colour: the stored svg paints with currentColor, so the icon inherits the
   text colour unless the row carries an svg_color, which icon() writes as an
   inline `color` on this wrapper. Any rule that sets `color` on .rb-icon
   (or on an ancestor, for inheriting icons) retints the artwork.
   ======================================================================== */

/* Sizing note: the box is 1em of the icon's OWN font-size, and that font-size
   is bumped above the surrounding text on purpose. An emoji glyph paints close
   to its full em box, whereas this artwork is drawn on a 24-unit grid with the
   shapes spanning roughly 2–22 — about 83% of the box. At an equal font-size
   the SVG therefore reads noticeably smaller than the emoji it replaced. 1.25em
   cancels that out, so a converted icon matches the weight of an unconverted
   one sitting next to it.

   Because the box is 1em of the local font-size, ['size' => '2rem'] still means
   exactly "a 2rem icon" — the option sets font-size and the box follows. */
.rb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25em;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.22em;
    line-height: 1;
    margin-inline-end: 0.3em;
}

/* Trailing icons take their gap on the other side. */
.rb-icon.after {
    margin-inline-end: 0;
    margin-inline-start: 0.3em;
}

/* Icons with no adjacent text — status badges, icon-only buttons, grid cells. */
.rb-icon.solo,
.rb-icon.no-gap {
    margin-inline-end: 0;
    margin-inline-start: 0;
}

.rb-icon > svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* `gap` is now the default — the class is kept as a harmless alias so the
   call sites that pass it (icon_text, rb_nav_icon) need no changes. Use
   `solo` above to opt OUT of the gap. */
.rb-icon.gap { /* alias — see the base rule */ }

/* Common sizes, relative to the 1.25em base above. */
.rb-icon.sm { font-size: 1.05em; }
.rb-icon.lg { font-size: 1.6em; }
.rb-icon.xl { font-size: 2.2em; }

/* Match the interaction the emoji icons had in sys.icons.css. */
.rb-icon.action {
    cursor: pointer;
    transition: transform var(--net-transition-fast), filter var(--net-transition-base);
}
.rb-icon.action:hover { transform: scale(1.1); filter: brightness(1.2); }

.rb-icon.spin > svg { animation: rb-icon-spin 1.1s linear infinite; }

@keyframes rb-icon-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .rb-icon.action { transition: none; }
    .rb-icon.spin > svg { animation: none; }
}