svg.icon {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
  overflow: visible;
  color: inherit;
}

/* Doubled class beats older `width: auto` rules that were written for the webfont. */
svg.icon.icon {
  width: 1em !important;
  height: 1em !important;
}

svg.icon.icon.icon-fw {
  width: 1.25em !important;
}

svg.icon.icon-xs { font-size: 0.75em; }
svg.icon.icon-sm { font-size: 0.875em; }
svg.icon.icon-lg { font-size: 1.333em; }
svg.icon.icon-2x { font-size: 2em; }
svg.icon.icon-3x { font-size: 3em; }
svg.icon.icon-4x { font-size: 4em; }
svg.icon.icon-5x { font-size: 5em; }

svg.icon.icon-spin {
  transform-origin: center;
  animation: icon-spin 1s linear infinite;
}

svg.icon.icon-pulse {
  transform-origin: center;
  animation: icon-spin 1s steps(8) infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

/* Heavier stroke so interface icons keep the weight of the old solid set. */
svg.icon:not(.icon-brand) {
  stroke-width: 2.5;
}

svg.icon:not(.icon-brand) :is(path, circle, line, polyline, polygon, rect, ellipse):not([fill="currentColor"]) {
  fill: none !important;
  stroke: currentColor !important;
}

svg.icon.icon-brand :is(path, circle, line, polyline, polygon, rect) {
  fill: currentColor !important;
  stroke: none !important;
}