/**
 * Vigthoria Refresh Button Styles
 * Enhanced styling for refresh buttons with loading, success, and error states
 */

.refresh-loading .fa-sync-alt {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.refresh-loading {
    opacity: 0.8;
    pointer-events: none; /* Prevent additional clicks while loading */
    transition: all 0.3s ease;
}

/* Success state */
.refresh-success {
    background-color: rgba(0, 255, 0, 0.2) !important;
    border-color: var(--neon-green, #00ff00) !important;
    box-shadow: 0 0 10px var(--neon-green, #00ff00) !important;
    transition: all 0.3s ease;
}

/* Error state */
.refresh-error {
    background-color: rgba(255, 0, 0, 0.2) !important;
    border-color: var(--neon-red, #ff0055) !important;
    box-shadow: 0 0 10px var(--neon-red, #ff0055) !important;
    transition: all 0.3s ease;
}

/* Ensure that all refresh buttons have a hover state */
#refresh-connection:hover,
#refresh-models:hover,
#refresh-ollama:hover,
#refresh-models-settings:hover {
    background-color: rgba(0, 255, 255, 0.1);
    border-color: var(--neon-blue, #00ffff);
    transition: all 0.3s ease;
}

/* Add a nice transition to the refresh icon */
.fa-sync-alt {
    transition: transform 0.3s ease;
}

/* When hovering over a refresh button, rotate the icon slightly */
button:hover .fa-sync-alt {
    transform: rotate(30deg);
}