[data-component="icon"], .icon-color {
  color: inherit;
  display: inline-flex;

  &[data-variant="primary"] {
    color: var(--_site-theme---icon--primary);
  }

  &[data-variant="secondary"] {
    color: var(--_site-theme---icon--secondary);
  }

  &[data-variant="accent"] {
    color: var(--_site-theme---icon--accent);
  }
}

[data-icon="size"], .icon {
  width: 1em;
  font-size: 1em;
  font-style: normal;
  display: inline-flex;

  &[data-variant="sm"] {
    font-size: 1.5rem;
  }

  &[data-variant="md"] {
    font-size: 2rem;
  }

  &[data-variant="lg"] {
    font-size: 3rem;
  }
}