/* SVG sprite icons (wwwroot/img/icons.svg), rendered by <icon name=".."/> or njohIcon(). Replaces Font Awesome. */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon use { pointer-events: none; }

.icon-sm { font-size: .875em; }
.icon-lg { font-size: 1.25em; vertical-align: -0.2em; }
.icon-2x { font-size: 2em; }
.icon-3x { font-size: 3em; }
.icon-4x { font-size: 4em; }
.icon-5x { font-size: 5em; }
.icon-fw { width: 1.25em; }

/* Solid look for toggled states (favourite heart, rated star, selected check). */
.icon-filled { fill: currentColor; }
.icon-filled.icon-circle-check,
.icon-filled.icon-circle-x,
.icon-filled.icon-info,
.icon-filled.icon-circle-help,
.icon-filled.icon-circle-alert { fill: none; stroke-width: 2.5; }

.icon-spin { animation: icon-spin 1s linear infinite; }

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

@media (prefers-reduced-motion: reduce) {
    .icon-spin { animation-duration: 3s; }
}