/* ========== Icon ========== */
/* Inline Iconsax SVGs. They use currentColor, so set color on the icon or its parent. */

.exa-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Iconsax has no diagonal arrow or plain X. Rotate existing icons instead:
 *   arrow-right-01 + .exa-icon--up-right  = ↗ (ExaLife's ArrowUpRight)
 *   add            + .exa-icon--x         = × (ExaLife's X / close) */
.exa-icon--up-right {
  transform: rotate(-45deg);
}

.exa-icon--x {
  transform: rotate(45deg);
}

/* JS frameworks render the SVG inside a <span class="exa-icon">; size the span, the SVG fills it. */
span.exa-icon {
  display: inline-flex;
}

span.exa-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ========== Logo ========== */
/* Inline logo from the React <Logo> / WordPress exa_logo(): the span sets the height, the SVG keeps its proportions. */
.exa-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%; /* in a tight spot the logo scales down instead of overflowing */
}

.exa-logo > svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
}