/**
 * RSL Icon System
 * Zero-dependency SVG icon styling for Responsive Slot Layout
 *
 * Usage:
 * <svg class="rsl-icon"><use href="images/rsl-icons.svg#rsl-icon-check"></use></svg>
 *
 * With size modifier:
 * <svg class="rsl-icon rsl-icon-lg"><use href="images/rsl-icons.svg#rsl-icon-check"></use></svg>
 *
 * @version 1.0.0
 */

/* ==========================================================================
   Base Icon Styles
   ========================================================================== */

.rsl-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0;
    overflow: visible;
}

/* For stroke-based icons (most RSL icons use stroke) */
.rsl-icon use {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Override for filled icons */
.rsl-icon-filled,
.rsl-icon-filled use {
    fill: currentColor;
    stroke: none;
}

/* ==========================================================================
   Size Variants
   ========================================================================== */

/* Extra Small - 0.75em (12px at 16px base) */
.rsl-icon-xs {
    font-size: 0.75em;
}

/* Small - 0.875em (14px at 16px base) */
.rsl-icon-sm {
    font-size: 0.875em;
}

/* Default - 1em (16px at 16px base) */
/* No class needed, this is the default */

/* Large - 1.25em (20px at 16px base) */
.rsl-icon-lg {
    font-size: 1.25em;
}

/* Extra Large - 1.5em (24px at 16px base) */
.rsl-icon-xl {
    font-size: 1.5em;
}

/* 2x - 2em (32px at 16px base) */
.rsl-icon-2x {
    font-size: 2em;
}

/* 3x - 3em (48px at 16px base) */
.rsl-icon-3x {
    font-size: 3em;
}

/* 4x - 4em (64px at 16px base) */
.rsl-icon-4x {
    font-size: 4em;
}

/* 5x - 5em (80px at 16px base) */
.rsl-icon-5x {
    font-size: 5em;
}

/* ==========================================================================
   Fixed Width (for alignment in lists/menus)
   ========================================================================== */

.rsl-icon-fw {
    width: 1.25em;
    text-align: center;
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Spin animation (for loading indicators) */
.rsl-icon-spin {
    animation: rsl-icon-spin 1s linear infinite;
}

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

/* Pulse animation */
.rsl-icon-pulse {
    animation: rsl-icon-pulse 1s ease-in-out infinite;
}

@keyframes rsl-icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Bounce animation */
.rsl-icon-bounce {
    animation: rsl-icon-bounce 0.5s ease infinite;
}

@keyframes rsl-icon-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Shake animation (for errors/alerts) */
.rsl-icon-shake {
    animation: rsl-icon-shake 0.5s ease-in-out;
}

@keyframes rsl-icon-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-2px);
    }
    40%, 80% {
        transform: translateX(2px);
    }
}

/* ==========================================================================
   Rotation & Flip
   ========================================================================== */

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

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

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

.rsl-icon-flip-horizontal {
    transform: scaleX(-1);
}

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

.rsl-icon-flip-both {
    transform: scale(-1, -1);
}

/* ==========================================================================
   Color Variants
   ========================================================================== */

/* Primary */
.rsl-icon-primary {
    color: var(--rsl-primary, #007bff);
}

/* Secondary */
.rsl-icon-secondary {
    color: var(--rsl-secondary, #6c757d);
}

/* Success */
.rsl-icon-success {
    color: var(--rsl-success, #28a745);
}

/* Danger */
.rsl-icon-danger {
    color: var(--rsl-danger, #dc3545);
}

/* Warning */
.rsl-icon-warning {
    color: var(--rsl-warning, #ffc107);
}

/* Info */
.rsl-icon-info {
    color: var(--rsl-info, #17a2b8);
}

/* Light */
.rsl-icon-light {
    color: var(--rsl-light, #f8f9fa);
}

/* Dark */
.rsl-icon-dark {
    color: var(--rsl-dark, #343a40);
}

/* Muted */
.rsl-icon-muted {
    color: var(--rsl-muted, #6c757d);
    opacity: 0.65;
}

/* ==========================================================================
   Stacking (icon on icon)
   ========================================================================== */

.rsl-icon-stack {
    display: inline-flex;
    position: relative;
    width: 2em;
    height: 2em;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}

.rsl-icon-stack .rsl-icon {
    position: absolute;
}

.rsl-icon-stack-1x {
    font-size: 1em;
}

.rsl-icon-stack-2x {
    font-size: 2em;
}

/* ==========================================================================
   List Icons
   ========================================================================== */

.rsl-icon-list {
    list-style: none;
    padding-left: 2em;
    margin-left: 0;
}

.rsl-icon-list > li {
    position: relative;
}

.rsl-icon-list > li > .rsl-icon {
    position: absolute;
    left: -2em;
    width: 2em;
    text-align: center;
}

/* ==========================================================================
   Bordered & Background
   ========================================================================== */

.rsl-icon-border {
    padding: 0.2em 0.25em;
    border: solid 0.08em currentColor;
    border-radius: 0.1em;
}

.rsl-icon-rounded {
    padding: 0.25em;
    border-radius: 50%;
    background: currentColor;
}

.rsl-icon-rounded use {
    stroke: var(--rsl-icon-rounded-color, #fff);
}

/* ==========================================================================
   Button Icons
   ========================================================================== */

/* Icon in button - add spacing */
.btn .rsl-icon,
button .rsl-icon,
.rsl-btn .rsl-icon {
    margin-right: 0.5em;
}

/* Icon-only button */
.btn .rsl-icon:only-child,
button .rsl-icon:only-child,
.rsl-btn .rsl-icon:only-child {
    margin-right: 0;
}

/* Icon after text */
.btn .rsl-icon-right,
button .rsl-icon-right,
.rsl-btn .rsl-icon-right {
    margin-right: 0;
    margin-left: 0.5em;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Hide decorative icons from screen readers */
.rsl-icon[aria-hidden="true"] {
    pointer-events: none;
}

/* Visually hidden text for screen readers */
.rsl-icon-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rsl-icon-spin,
    .rsl-icon-pulse,
    .rsl-icon-bounce,
    .rsl-icon-shake {
        animation: none;
    }
}

/* ==========================================================================
   Dark Mode Support
   ========================================================================== */

[data-theme="dark"] .rsl-icon-light {
    color: var(--rsl-dark, #343a40);
}

[data-theme="dark"] .rsl-icon-dark {
    color: var(--rsl-light, #f8f9fa);
}

[data-theme="dark"] .rsl-icon-rounded {
    background: currentColor;
}

[data-theme="dark"] .rsl-icon-rounded use {
    stroke: var(--rsl-icon-rounded-color-dark, #1a1a1a);
}

/* ==========================================================================
   Brand Icons (SimpleIcons CDN)
   ========================================================================== */

.rsl-brand-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Size variants for brand icons */
.rsl-brand-icon-xs { width: 0.75em; height: 0.75em; }
.rsl-brand-icon-sm { width: 0.875em; height: 0.875em; }
.rsl-brand-icon-lg { width: 1.25em; height: 1.25em; }
.rsl-brand-icon-xl { width: 1.5em; height: 1.5em; }
.rsl-brand-icon-2x { width: 2em; height: 2em; }
.rsl-brand-icon-3x { width: 3em; height: 3em; }

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Inline with text baseline */
.rsl-icon-inline {
    vertical-align: baseline;
}

/* Middle alignment */
.rsl-icon-middle {
    vertical-align: middle;
}

/* Text top alignment */
.rsl-icon-text-top {
    vertical-align: text-top;
}

/* Text bottom alignment */
.rsl-icon-text-bottom {
    vertical-align: text-bottom;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .rsl-icon {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .rsl-icon-spin,
    .rsl-icon-pulse,
    .rsl-icon-bounce {
        animation: none;
    }
}