/**
 * SVG Icon system for SMB-WEB
 *
 * Design goals:
 * - Font Awesome–like ergonomics
 * - Bootstrap-compatible colors (text-*)
 * - Relative units only (rem / em)
 * - CSP-friendly (no inline, no JS)
 *
 * Usage:
 *   <svg class="icon icon-sm text-primary">
 *     <use href="/static/icons/sprite.svg#fa-solid-chevron-right"></use>
 *   </svg>
 */

/* Base icon */
.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    pointer-events: none;
    stroke: none;
    vertical-align: -0.125em;
    /* close to Font Awesome baseline */
    display: inline-block;
    flex-shrink: 0;
}

.icon use {
    fill: currentColor;
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* Size scale (Font Awesome / Bootstrap inspired) */
.icon-xxs {
    font-size: 0.625rem;
}

/* ~10px */
.icon-xs {
    font-size: 0.75rem;
}

/* ~12px */
.icon-sm {
    font-size: 0.875rem;
}

/* ~14px */
.icon-md {
    font-size: 1rem;
}

/* base */
.icon-lg {
    font-size: 1.5rem;
}

/* ~24px */
.icon-xl {
    font-size: 2rem;
}

/* ~32px */
.icon-xxl {
    font-size: 3rem;
}

/* large emphasis */

/* Muted / disabled */
.icon-muted {
    color: var(--bs-secondary-color, #6c757d);
}

.icon-disabled {
    color: var(--bs-secondary-color, #adb5bd);
    opacity: 0.65;
    pointer-events: none;
}

/* Hover helpers */
.icon-hover {
    transition: color 0.15s ease-in-out;
}

.icon-hover:hover {
    color: var(--bs-primary, #0d6efd);
}

/* Alignment helpers */
.icon-start {
    margin-right: 0.25em;
}

.icon-end {
    margin-left: 0.25em;
    margin-right: 1.25rem;
}

/* Rotation helpers (replacement for fa-rotate-*) */
.icon-rotate-90 {
    transform: rotate(90deg);
}

.icon-rotate-180 {
    transform: rotate(180deg);
}

.icon-rotate-270 {
    transform: rotate(270deg);
}

/* Flip helpers */
.icon-flip-horizontal {
    transform: scaleX(-1);
}

.icon-flip-vertical {
    transform: scaleY(-1);
}