/**************************************************************************************************

Animated circular/pie countdown timer, HTML/CSS only. Usage:

    <div class="countdown-circle" style="
        --duration: 2;
        --size: 100;
        --color: black;
        --bg: silver;
        --thickness: 100;
        "></div>

or using jQuery

    var $timer = $('<div class="countdown-circle"></div>')
        .css('--duration', timeout);
    $('#target').append($timer);

Where

    --duration (int) is measured in seconds
    --size (int) is the diameter in pixels
    --color (str) is any valid CSS color
    --bg (str)  -"-
    --thickness (int) is the thickness of the ring measured in percent,
        so 10 is a thin ring, 50 a thick ring and 100 is a pie

Heavily inspired by
https://stackoverflow.com/a/69481301/945257
Modified to not use -webkit prefixes, to only require one HTML element
and to only count down once and then stop, instead of repeating forever.

Todo: look at alternatives, such as
https://stackoverflow.com/q/18835477/945257
https://codepen.io/KittyGiraudel/pen/nxxwwP / https://css-tricks.com/css-pie-timer/
At larger sizes this implementation is a bit jagged and jerky.

**************************************************************************************************/

.countdown-circle {
    --bg: #999;
    --color: #fff;
    --size: 16;
    --duration: 10;
    --thickness: 50%;

    --mask-size: calc((100% - var(--thickness)) / 1.414);

    background: linear-gradient(to right, var(--bg) 50%, var(--color) 50%);
    border-radius: 100%;
    height: calc(var(--size) * 1px);
    width: calc(var(--size) * 1px);
    position: relative;
    animation: countdown-circle-time calc(var(--duration) * 1s) steps(1000, start) forwards;
    mask: radial-gradient(transparent var(--mask-size), black var(--mask-size));
}
.countdown-circle::before {
    content: '';
    display: block;
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    animation: countdown-circle-mask calc(var(--duration) * 1s) steps(1000, start) forwards;
    transform-origin: 100% 50%;
}
.countdown-circle::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bg);
    opacity: 0;
    animation: countdown-circle-end calc(var(--duration) * 1s) steps(1000, start) forwards;
}
@-webkit-keyframes countdown-circle-time {
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes countdown-circle-end {
    0%, 99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes countdown-circle-mask {
    0% {
        background: var(--color);
        transform: rotate(0deg);
    }
    50% {
        background: var(--color);
        transform: rotate(-180deg);
    }
    50.01% {
        background: var(--bg);
        transform: rotate(0deg);
    }
    100% {
        background: var(--bg);
        transform: rotate(-180deg);
    }
}

/**************************************************************************************************
Project specific styling, adapting the countdown to different scenarios
**************************************************************************************************/

.btn-green .countdown-circle,
.success .countdown-circle {
    --bg: #4c8e81; /* --color-green with 13% black overlay */
}

.btn-yellow .countdown-circle,
.warning .countdown-circle {
    --bg: #b18b50; /* --color-yellow with 13% black overlay */
}

.btn-red .countdown-circle,
.error .countdown-circle {
    --bg: #ae6760; /* slightly darker than --color-red */
}

.btn-blue .countdown-circle,
.message .countdown-circle  {
    --bg: #426475; /* slightly darker than --color-blue */
}

.alert-danger .countdown-circle {
    --bg: #e6c8cb; /* slightly darker than --bg-red-flat  */
}

.alert-success .countdown-circle {
    --bg: #c0ccca; /* slightly darker than --bg-green-flat */
}

.alert-info .countdown-circle {
    --bg: #c3cace; /* slightly darker than --bg-blue-flat */
}

#banner .countdown-circle {
    position: absolute;
    top: 10px;
    right: 10px;
}

.btn .countdown-circle {
    display: inline-block;
    --size: 21;
    margin-bottom: -4px;
}

.btn.icon-left .countdown-circle {
    margin-right: 10px;
}

.btn.icon-right .countdown-circle {
    margin-left: 10px;
}