@layer components {
  .icon {
    /* Rendered by the `icon/1` component in CoreComponents. Icons inherit
       the current text colour (currentColor) and default to 1em so they
       scale with the surrounding text. */
    display: inline-block;
    width: var(--icon-size, 1em);
    height: var(--icon-size, 1em);
    flex-shrink: 0;
    vertical-align: -0.125em;
  }

  .icon--small {
    --icon-size: var(--length-6);
  }

  /* Spinning state for loading indicators (e.g. the reconnecting flash).
     Wrapped in a reduced-motion guard so the animation is opt-in only. */
  @media (prefers-reduced-motion: no-preference) {
    .icon--spin {
      animation: icon__spin 1s linear infinite;
    }
  }

  @keyframes icon__spin {
    to {
      transform: rotate(360deg);
    }
  }
}