/* SVG Icon Utility Classes */

/* Base icon styles */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* Icon sizes */
.icon-xs { width: 0.75rem; height: 0.75rem; }
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.25rem; height: 1.25rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.icon-xl { width: 2rem; height: 2rem; }
.icon-2xl { width: 2.5rem; height: 2.5rem; }

/* Icon colors using CSS filters */
/* Using a very short transition (0.05s) to minimize color interpolation artifacts (green flash) */
/* while still providing some visual feedback during hover states */
.icon-white,
.icon-accent,
.icon-muted,
.icon-success,
.icon-danger,
.icon-warning,
.icon-info {
    transition: filter 0.05s ease-out;
}

/* White icon */
.icon-white {
    filter: brightness(0) invert(1);
}

/* Accent/Orange color (#ff9500) */
.icon-accent {
    filter: invert(52%) sepia(94%) saturate(1095%) hue-rotate(2deg) brightness(103%) contrast(105%);
}

/* Muted/gray color - matches --text-muted */
/* Dark mode: #a3a3a3, Light mode: #64748b */
.icon-muted {
    filter: invert(68%) sepia(6%) saturate(0%) brightness(95%);
}
:root:not([data-theme="dark"]) .icon-muted {
    filter: invert(44%) sepia(14%) saturate(468%) hue-rotate(179deg) brightness(92%) contrast(87%);
}

/* Success/green color */
.icon-success {
    filter: invert(61%) sepia(79%) saturate(393%) hue-rotate(93deg) brightness(94%) contrast(92%);
}

/* Danger/red color */
.icon-danger {
    filter: invert(33%) sepia(100%) saturate(1352%) hue-rotate(343deg) brightness(102%) contrast(97%);
}

/* Warning/amber color */
.icon-warning {
    filter: invert(66%) sepia(85%) saturate(1000%) hue-rotate(10deg) brightness(100%) contrast(100%);
}

/* Info/blue color */
.icon-info {
    filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(200deg) brightness(100%) contrast(98%);
}

/* Nav icon - muted by default, accent when parent has .active or on hover */
/* No filter transition to avoid green flash; opacity provides subtle visual feedback */
.icon-nav {
    filter: invert(68%) sepia(6%) saturate(0%) brightness(95%);
    transition: opacity 0.15s ease;
}
:root:not([data-theme="dark"]) .icon-nav {
    filter: invert(44%) sepia(14%) saturate(468%) hue-rotate(179deg) brightness(92%) contrast(87%);
}
/* Active/hover state - orange accent with brief opacity dip for smooth feel */
.nav-link:hover .icon-nav,
.dropdown-item:hover .icon-nav {
    filter: invert(52%) sepia(94%) saturate(1095%) hue-rotate(2deg) brightness(103%) contrast(105%);
    opacity: 0.9;
}
/* Active state - no opacity change, just color */
.nav-link.active .icon-nav,
:root:not([data-theme="dark"]) .nav-link.active .icon-nav {
    filter: invert(52%) sepia(94%) saturate(1095%) hue-rotate(2deg) brightness(103%) contrast(105%);
}
:root:not([data-theme="dark"]) .nav-link:hover .icon-nav,
:root:not([data-theme="dark"]) .dropdown-item:hover .icon-nav {
    filter: invert(52%) sepia(94%) saturate(1095%) hue-rotate(2deg) brightness(103%) contrast(105%);
    opacity: 0.9;
}

/* Tab icon - muted by default, white when parent has .active */
/* No transition to prevent color interpolation artifacts */
.icon-tab {
    filter: invert(68%) sepia(6%) saturate(0%) brightness(95%);
}
:root:not([data-theme="dark"]) .icon-tab {
    filter: invert(44%) sepia(14%) saturate(468%) hue-rotate(179deg) brightness(92%) contrast(87%);
}
.location-tab.active .icon-tab,
:root:not([data-theme="dark"]) .location-tab.active .icon-tab {
    filter: brightness(0) invert(1);
}

/* Deploy tab icon - muted by default, accent when parent has .active or on hover */
.icon-deploy {
    filter: invert(68%) sepia(6%) saturate(0%) brightness(95%);
}
:root:not([data-theme="dark"]) .icon-deploy {
    filter: invert(44%) sepia(14%) saturate(468%) hue-rotate(179deg) brightness(92%) contrast(87%);
}
.deploy-tab.active .icon-deploy,
.deploy-tab:hover .icon-deploy,
:root:not([data-theme="dark"]) .deploy-tab.active .icon-deploy,
:root:not([data-theme="dark"]) .deploy-tab:hover .icon-deploy {
    filter: invert(52%) sepia(94%) saturate(1095%) hue-rotate(2deg) brightness(103%) contrast(105%);
}

/* Stripe purple color (#635bff) */
.icon-stripe {
    filter: invert(35%) sepia(76%) saturate(1846%) hue-rotate(225deg) brightness(98%) contrast(106%);
}

/* Current color - inherits parent's color */
.icon-current {
    filter: none;
}

/* Spinning animation for loading icons */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

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