/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-icon {
  display: inline-block;
  vertical-align: top;
  /** @prop --pn-icon-color: The icon color. */
  --pn-icon-color: main.$gray900;
}
pn-icon[small] svg {
  height: 1em;
  width: 1em;
}
pn-icon svg {
  display: block;
  height: 1.5em;
  width: 1.5em;
}
pn-icon .pn-icon-svg > circle,
pn-icon .pn-icon-svg > path {
  fill: var(--pn-icon-color);
  transition-property: fill;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  pn-icon .pn-icon-svg > circle,
  pn-icon .pn-icon-svg > path {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}