/**
 * Icons CSS with CDN font paths.
 * Use this when you want to serve fonts from a CDN.
 */
@font-face {
  font-family: 'icons';
  src:
    url('https://catalystonedev.azureedge.net/cdn/design-system/icons/fonts/icons.eot')
      format('eot'),
    url('https://catalystonedev.azureedge.net/cdn/design-system/icons/fonts/icons.woff')
      format('woff'),
    url('https://catalystonedev.azureedge.net/cdn/design-system/icons/fonts/icons.woff2')
      format('woff2'),
    url('https://catalystonedev.azureedge.net/cdn/design-system/icons/fonts/icons.ttf')
      format('truetype');
  text-rendering: optimizelegibility;
  font-display: block;
}

/*
  Taking control of the <i> tag
  for icon purposes, and removing
  the natural italic behavior.
*/
i.coIconSymbol {
  --co-css-loaded: 1;

  color: transparent;
  font-family: 'icons' !important;
  font-size: 1rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1rem;
  transition: color 0.1s ease;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;

  font-size: var(--co-icon-size, 1rem);
  width: var(--co-icon-size, 1rem);
  height: var(--co-icon-size, 1rem);
  line-height: var(--co-icon-size, 1rem);
}

/* Show icon when font family is supported */
@supports (font-family: 'icons') {
  i.coIconSymbol {
    color: var(--co-icon-color, inherit);
  }
}