@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Avatar Upload Styles
 * Handles upload button, modal, and crop interface styling
 *
 * @since 4.2.3
 */

/* Avatar Container Positioning */
.wpuf-avatar-container {
    position: relative;
    display: inline-block;
}

/* Upload Button - Only show on hover */
.wpuf-avatar-container:hover .wpuf-avatar-upload-btn {
    opacity: 1;
}

/* Cover Photo Container - Show upload button on hover */
.wpuf-cover-photo__container--editable:hover .wpuf-cover-photo-upload-btn {
    opacity: 1;
}

/* Hide upload icon, show text */
.wpuf-avatar-upload-icon {
    display: none;
}

.wpuf-avatar-upload-text {
    display: block;
}

/* Additional styles for dynamic classes and hover states */
.wpuf-avatar-drop-zone.wpuf-drag-over {
    transform: scale(1.05);
}

.wpuf-avatar-crop-controls.wpuf-cropping {
    opacity: 0.5;
    pointer-events: none;
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    .wpuf-avatar-modal-overlay {
        padding: 10px;
    }

    .wpuf-avatar-modal-content {
        max-height: 95vh;
    }

    .wpuf-avatar-modal-header,
    .wpuf-avatar-modal-body,
    .wpuf-avatar-modal-footer {
        padding: 16px;
    }

    .wpuf-avatar-drop-zone {
        padding: 30px 15px;
    }

    .wpuf-avatar-crop-container {
        min-height: 250px;
    }

    .wpuf-avatar-crop-controls {
        gap: 6px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpuf-avatar-upload-btn {
        border-color: #000;
        background: #000;
        color: #fff;
    }
    .wpuf-avatar-drop-zone {
        border-color: #000;
        background: #fff;
        color: #000;
    }
    .wpuf-avatar-modal-content {
        border: 2px solid #000;
    }
}

/* Button States - Loading and Success */
.wpuf-avatar-crop.wpuf-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.wpuf-avatar-crop.wpuf-loading:hover {
    background-color: inherit;
    border-color: inherit;
}

.wpuf-avatar-crop.wpuf-success {
    background-color: #10b981;
    border-color: #10b981;
    color: white;
}

.wpuf-avatar-crop.wpuf-success:hover {
    background-color: #059669;
    border-color: #059669;
}

/* Spinner Animation */
.wpuf-animate-spin {
    animation: wpuf-spin 1s linear infinite;
}

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

/* Disabled Button States */
.wpuf-avatar-crop:disabled,
.wpuf-avatar-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.wpuf-avatar-crop:disabled:hover,
.wpuf-avatar-cancel:disabled:hover {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wpuf-avatar-upload-btn,
    .wpuf-avatar-drop-zone,
    .wpuf-btn,
    .wpuf-avatar-progress-fill,
    .wpuf-animate-spin {
        transition: none;
        animation: none;
    }
    .wpuf-avatar-drop-zone:hover {
        transform: none;
    }
}