/**
 * Auto Refresh Progress Bar Module
 * Provides a subtle top-border animation for auto-refresh functionality
 * 
 * Usage:
 * 1. Add class "auto-refresh-card" to any card element
 * 2. Include this CSS file
 * 3. Use autoRefresh.js for functionality
 */

.auto-refresh-card {
    position: relative;
    overflow: hidden;
}

.auto-refresh-border {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.3) 50%, rgba(0, 123, 255, 0.1) 100%);
    z-index: 1;
    border-radius: inherit;
}

.auto-refresh-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
    transform: translateX(-100%);
    border-radius: inherit;
}

/* Animation variants - Duration minus refreshing time (300ms) */
.auto-refresh-border.duration-5::after {
    animation: refresh-progress 4.7s linear infinite;
}

.auto-refresh-border.duration-10::after {
    animation: refresh-progress 9.7s linear infinite;
}

.auto-refresh-border.duration-15::after {
    animation: refresh-progress 14.7s linear infinite;
}

.auto-refresh-border.duration-20::after {
    animation: refresh-progress 19.7s linear infinite;
}

.auto-refresh-border.duration-30::after {
    animation: refresh-progress 29.7s linear infinite;
}

.auto-refresh-border.duration-60::after {
    animation: refresh-progress 59.7s linear infinite;
}

.auto-refresh-border.duration-120::after {
    animation: refresh-progress 119.7s linear infinite;
}

@keyframes refresh-progress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}

/* Refreshing state */
.auto-refresh-border.refreshing::after {
    animation: none !important;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    transform: translateX(0%);
    transition: all 0.3s ease;
}

.auto-refresh-border.refreshing {
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.3) 50%, rgba(40, 167, 69, 0.1) 100%);
}

/* Color variants */
.auto-refresh-border.variant-success::after {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.auto-refresh-border.variant-warning::after {
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
}

.auto-refresh-border.variant-danger::after {
    background: linear-gradient(90deg, #dc3545 0%, #e83e8c 100%);
}

.auto-refresh-border.variant-info::after {
    background: linear-gradient(90deg, #17a2b8 0%, #6f42c1 100%);
}

/* Thickness variants */
.auto-refresh-border.thin {
    height: 2px;
}

.auto-refresh-border.thick {
    height: 5px;
}

.auto-refresh-border.extra-thick {
    height: 8px;
}