/**
 * Status Indicator Component Styles
 * 
 * Small icons for success/fail states.
 * Matches spinner sizing for consistency.
 */

.status-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.status-indicator svg {
    width: 100%;
    height: 100%;
}

/* Sizes - match spinner */
.status-indicator--sm {
    width: 12px;
    height: 12px;
}

.status-indicator--lg {
    width: 24px;
    height: 24px;
}

/* Status colors */
.status-indicator--success {
    color: var(--signal-optimal, #317769);
}

.status-indicator--fail {
    color: var(--signal-over, #B55A5A);
}