/* Hangman status indicator inside thread lists. */

:root {
    --hangman-indicator-open: #95a5a6;
    --hangman-indicator-own: #8e44ad;
    --hangman-indicator-playing: #3498db;
    --hangman-indicator-solved: #27ae60;
    --hangman-indicator-locked: #e74c3c;
    --hangman-indicator-retry: #f39c12;
    --hangman-indicator-failed: #c0392b;
}

html[data-color-scheme="dark"] {
    --hangman-indicator-open: #8b9698;
    --hangman-indicator-own: #b07cd0;
    --hangman-indicator-playing: #5dade2;
    --hangman-indicator-solved: #5dd99a;
    --hangman-indicator-locked: #ff6b6b;
    --hangman-indicator-retry: #f5b041;
    --hangman-indicator-failed: #e08080;
}

.hangmanThreadIndicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    background-color: var(--hangman-indicator-color, var(--hangman-indicator-open));
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Not played yet and games the user cannot play: hollow circle. */
.hangmanThreadIndicator--open,
.hangmanThreadIndicator--own,
.hangmanThreadIndicator--failed {
    background-color: transparent;
    border: 2px solid var(--hangman-indicator-color, var(--hangman-indicator-open));
    box-shadow: none;
}

.hangmanThreadIndicator--open {
    --hangman-indicator-color: var(--hangman-indicator-open);
}

.hangmanThreadIndicator--own {
    --hangman-indicator-color: var(--hangman-indicator-own);
}

.hangmanThreadIndicator--playing {
    --hangman-indicator-color: var(--hangman-indicator-playing);
}

.hangmanThreadIndicator--solved {
    --hangman-indicator-color: var(--hangman-indicator-solved);
}

.hangmanThreadIndicator--locked {
    --hangman-indicator-color: var(--hangman-indicator-locked);
}

.hangmanThreadIndicator--retry {
    --hangman-indicator-color: var(--hangman-indicator-retry);
    animation: hangmanIndicatorPulse 1.8s ease-in-out infinite;
}

.hangmanThreadIndicator--failed {
    --hangman-indicator-color: var(--hangman-indicator-failed);
}

@keyframes hangmanIndicatorPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, .6);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(243, 156, 18, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hangmanThreadIndicator--retry {
        animation: none;
    }
}