/* Icon
 *
 * Phosphor Icons, MIT licensed — see STORY-039. The design library has no build
 * step and no dependencies (design.md), so the glyphs we use are inlined as an
 * SVG sprite in icon-sprite.svg rather than pulled from the package. The app
 * uses @phosphor-icons/react and phosphor-react-native instead; the shapes are
 * the same, so a mockup and the built screen agree.
 *
 * One weight: Regular. Fill marks a current or selected state. Mixing weights
 * across a product reads as inconsistency rather than emphasis.
 *
 * Usage — the glyph is ALWAYS decorative, because the label carries the meaning:
 *
 *   <svg class="icon" aria-hidden="true" focusable="false">
 *     <use href="../components/icon/icon-sprite.svg#calendar"></use>
 *   </svg>
 *   Calendar
 *
 * An icon with no adjacent text is a guess. If a control genuinely cannot show a
 * label — the menu button, a close button — it needs an aria-label instead, and
 * that is the exception, not the pattern.
 */

.icon {
  /* Scales with the text it sits beside rather than being pinned to a px size. */
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;

  /* Inherits the colour of its context. Never give an icon its own colour token —
   * it should darken and lighten with the text it accompanies. */
  fill: currentcolor;

  /* Optical alignment: icons sit slightly low against a text baseline. */
  vertical-align: -0.15em;
}

/* Larger, for empty states and the drawer header. */
.icon--lg { inline-size: 1.75em; block-size: 1.75em; }

/* Standalone icon button — the exception above. Needs an aria-label. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);

  background: none;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}

.icon-button:hover { background-color: var(--color-surface-sunken); }

.icon-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}