<script>
 import {
     ButtonGroup,
     Icon,
 } from 'sveltestrap';

 import { time } from '$lib/stores/settings.js';

 export { className as class };
 let className = '';
</script>

<div
    class="clock {className}"
    class:expired={$time.expired}
    class:end={$time.end}
    class:wait={$time.startIn}
>
    {#if $time.seconds}
        <span id="hours">
            {$time.hours}
        </span>
        <span class="point">
            :
        </span>
        <span id="minutes">
            {$time.minutes}
        </span>
        <span class="point">
            :
        </span>
        <span id="seconds">
            {$time.seconds}
        </span>
    {:else}
        Chargement
    {/if}
</div>

<style>
 .clock:not(.expired):not(.wait) .point, .clock.expired {
     transition: color text-shadow 1s;
     position: relative;
     animation: clockanim 1s ease infinite;
     -moz-animation: clockanim 1s ease infinite;
     -webkit-animation: clockanim 1s ease infinite;
 }
 .clock.wait .point {
     transition: color text-shadow 1s;
     position: relative;
     animation: clockwait 1s ease infinite;
     -moz-animation: clockwait 1s ease infinite;
     -webkit-animation: clockwait 1s ease infinite;
 }
 .end {
     color: #e64143;
 }
 .point {
     text-shadow: 0 0 20px #4eaee6;
 }
 .end .point {
     text-shadow: 0 0 20px #e64143;
 }
 @keyframes clockanim {
     0% { opacity: 1.0; }
     50% { opacity: 0; }
     100% { opacity: 1.0; }
 }
 @keyframes clockwait {
     0% { text-shadow: 0 0 20px #A6D6F2; }
     50% { text-shadow: 0 0 2px #A6D6F2; }
     100% { text-shadow: 0 0 20px #A6D6F2; }
 }
</style>
