/**
 * Simple Likes - CSS Styles
 *
 * Include this CSS file in your project for animations and default styling.
 * Users can customize or override these styles as needed.
 *
 * Usage:
 * - Import in your main CSS: @import 'vendor/simple-likes/css/simple-likes.css';
 * - Or link directly: <link rel="stylesheet" href="/vendor/simple-likes/css/simple-likes.css">
 */

/* Pulse animation for like button feedback */
@keyframes simple-likes-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Apply pulse animation */
.simple-likes-pulse {
    animation: simple-likes-pulse 0.3s ease-in-out;
}

/* Base button styles (optional - customize as needed) */
.simple-likes-btn {
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.simple-likes-btn:hover {
    opacity: 0.8;
}

.simple-likes-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Loading state */
.simple-likes-btn[data-loading="true"] {
    pointer-events: none;
    opacity: 0.7;
}

/* Heart icon colors */
.simple-likes-heart {
    transition: fill 0.2s ease, color 0.2s ease;
}

.simple-likes-heart--liked {
    fill: currentColor;
    color: #ef4444;
}

.simple-likes-heart--unliked {
    fill: none;
    color: #6b7280;
}

/* Count styling */
.simple-likes-count {
    transition: color 0.2s ease;
}

.simple-likes-count--liked {
    color: #ef4444;
}

.simple-likes-count--unliked {
    color: #6b7280;
}

/* Error messages */
.simple-likes-error {
    display: none;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
}

.simple-likes-error--error {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.simple-likes-error--warning {
    background-color: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}