/* Polyh: Icon — the wrapper only. The glyph carries its own geometry and takes its
   colour from `currentColor`, so there is deliberately almost nothing here: every
   visual property a client might want to change is a widget control, not a rule in
   this file. */

.polyh-icon-wrap {
  display: flex;
  align-items: center;
  line-height: 0;
}

.polyh-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: #2FD37A;
  transition: color .3s ease, transform .3s ease;
}

/* The drawing fills the box it is given. `display:block` kills the inline-baseline
   gap that would otherwise make an icon sit a pixel or two low beside its label —
   the kind of misalignment that reads as sloppiness without ever looking like a bug. */
.polyh-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .polyh-icon { transition: none; }
}