/*
 * Shared icon primitives.
 *
 * - --icon-size controls rendered dimensions.
 * - SVG scales from its viewBox and stays crisp on high-density displays.
 */

.amp-icon {
  --icon-size: 1em;

  display: inline-flex;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: currentcolor;
  vertical-align: middle;
}

.amp-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  shape-rendering: geometricprecision;
  text-rendering: geometricprecision;
}

/* Keep stroked icons visually stable when size changes across breakpoints. */
.amp-icon > svg * {
  vector-effect: non-scaling-stroke;
}

.amp-icon.is-missing,
.amp-icon.is-error {
  opacity: 0.45;
}

@media (resolution >= 2dppx) {
  .amp-icon > svg {
    transform: translateZ(0);
  }
}