/**
 * choice-status-bar.css — полоска прогресса и анимация при блокировке выбора временным статусом (linked_status_ids).
 */

:root {
    /* Градиент полоски (голубой/бирюзовый шиммер) */
    --status-bar-color-1: rgba(76, 201, 240, 0.4);
    --status-bar-color-2: rgba(0, 212, 255, 0.6);
    --status-bar-color-3: rgba(76, 201, 240, 0.8);
    --status-bar-color-4: rgba(0, 255, 255, 1);
    --status-bar-color-5: rgba(76, 201, 240, 0.8);
    --status-bar-color-6: rgba(0, 212, 255, 0.6);
    --status-bar-color-7: rgba(76, 201, 240, 0.4);
    /* Анимация шиммера */
    --status-bar-bg-size: 300% 100%;
    --status-bar-animation-duration: 10s;
    --status-bar-animation-timing: linear;
    --status-bar-border-radius: 0;
    --status-bar-width-transition: 0.3s ease;
}

/* Кнопка выбора, связанная со статусом (временная блокировка) */
.choice-btn.status-linked {
    position: relative;
    overflow: hidden;
}

/* Полоска прогресса оставшегося времени статуса */
.choice-btn.status-linked .status-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--status-bar-color-1) 0%,
        var(--status-bar-color-2) 20%,
        var(--status-bar-color-3) 40%,
        var(--status-bar-color-4) 50%,
        var(--status-bar-color-5) 60%,
        var(--status-bar-color-6) 80%,
        var(--status-bar-color-7) 100%
    );
    background-size: var(--status-bar-bg-size);
    animation: statusBarFlow var(--status-bar-animation-duration) var(--status-bar-animation-timing) infinite;
    transition: width var(--status-bar-width-transition);
    z-index: 0;
    pointer-events: none;
    border-radius: var(--status-bar-border-radius);
}

/* Текст кнопки поверх полоски */
.choice-btn.status-linked > *:not(.status-progress-bar) {
    position: relative;
    z-index: 1;
}

@keyframes statusBarFlow {
    0% {
        background-position: 300% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

.choice-btn.status-linked:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.choice-btn.status-linked:disabled:hover {
    opacity: 0.8;
}