/**
 * Sparkles Status Classes
 * Moved from sparkles-utilities.css to resolve circular dependencies
 * These classes use @apply with sparkles-status-base;
 */

/* Status variants using the base class */
.sparkles-status-success,
.sparkles-status-error,
.sparkles-status-warning,
.sparkles-status-info,
.sparkles-status-neutral {
    display: inline-flex;
    align-items: center;
    padding: .125rem .625rem;
    border-radius: var(--radius-full);
    font-size: .75rem;
    font-weight: 500;
}

.sparkles-status-success {
    background-color: var(--color-success-light);
    --tw-text-opacity: 1;
    color: rgba(6,95,70,var(--tw-text-opacity,1));
}

.sparkles-status-error {
    --tw-bg-opacity: 1;
    background-color: rgba(254,226,226,var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgba(153,27,27,var(--tw-text-opacity,1));
}

.sparkles-status-warning {
    --tw-bg-opacity: 1;
    background-color: rgba(254,243,199,var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgba(146,64,14,var(--tw-text-opacity,1));
}

.sparkles-status-info {
    color: var(--color-primary);
    background-color: rgb(var(--color-primary-rgb) / 0.1);
}

.sparkles-status-neutral {
    background-color: var(--gray-100);
    color: var(--gray-800);
}