/**
 * Central icon styles for RacePace.
 * Use with Django partial: {% include 'home/partials/icon.html' with icon_path='...' size='md' %}
 * Or with custom element: <racepace-icon name="export" size="md"></racepace-icon>
 * Or with <img class="icon icon--md" src="..." alt=""> for custom usage.
 *
 * All icon SVGs live in: static/icons/svg/
 */

:root {
    --icon-size-xs: 6px;
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 28px;
    --icon-size-xl: 32px;
    --icon-size-2xl: 48px;
    --icon-size-display: 60px;
}

/* Base icon class: inherits color so inline SVGs (currentColor) respond to parent; override via .icon { color: ... } */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    color: inherit;
}

/* Predefined size classes (use on <img> or wrapper around inline <svg>) */
.icon--xs {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
}

.icon--sm {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}

.icon--md {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
}

.icon--lg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.icon--xl {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
}

.icon--2xl {
    width: var(--icon-size-2xl);
    height: var(--icon-size-2xl);
}

.icon--display {
    width: var(--icon-size-display);
    height: var(--icon-size-display);
}

/* When icon is an <img>, size the image (non-themeable icons) */
.icon img,
img.icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: middle;
}

/* Inline SVG (themeable via currentColor) */
.icon svg {
    width: 100%;
    height: 100%;
    display: block;
}