:root {
    --scaling-factor: 1;
}
html, body, main {margin: 0; padding: 0; width: 100%}

/* Start invisible, reveal e.g. reset button */
@keyframes hide-show {
    0%{opacity: 0; visibility: hidden;}
    95%{opacity: 0;visibility: visible;}
    100%{opacity: 1;}
}

@keyframes grow-exp-cts-vert {
    0%{
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(calc(1 + var(--scaling-factor)));
    }
}


/* Start visible, hide at end of animation e.g. btn-multi container  */
@keyframes show-hide {
    0%{opacity: 1; visibility: visible}
    95%{opacity: 1;transform: scale(1)}
    100%{opacity: 0;transform: scale(0);visibility: hidden}
}

@keyframes timer-countup {
    0% {content: "0"}
    10% {content: "1"}
    20% {content: "2"}
    30% {content: "3"}
    40% {content: "4"}
    50% {content: "5"}
    60% {content: "6"}
    70% {content: "7"}
    80% {content: "8"}
    90% {content: "9"}
    100% {content: "10"}
}


.btn {
    align-items: center;
    background-color: var(--reduct-blue-lightest);
    display:inline-flex; color: #FFF;
    font-size: calc(1rem * var(--base-font-size));
    justify-content: center;
    line-height: 1;
    height:calc(2.75rem * var(--base-font-size));
    width: calc(2.75rem * var(--base-font-size));
    position: relative;
}

.btn-multi {display: inline-block;min-height: fit-content;}

.player > .btn,
.player > .btn::before,
.btn-multi > .btn,
.btn-multi > .btn::before {border-radius: 50%;}


/* these inputs hidden from user */ 
.btn-tg {visibility: hidden;width: 0}

.btn.small {
    font-size: calc(0.875rem * var(--base-font-size));
    min-height:calc(1.5rem * var(--base-font-size));
    min-width: calc(1.5rem * var(--base-font-size));
}
.btn-tg-play-pause:checked + label, .btn-tg-reset:checked + label{
    outline:0.3125rem solid var(--reduct-red);outline-offset:0
}

.btn > span {color: white; margin:0;padding: 0}


input {
    all: unset;-webkit-appearance: none;-moz-appearance: none;appearance: none;
    background: transparent;border: none;outline: none;
}

.player {border: solid 0.125rem #ddd;box-sizing: border-box;
    padding: 1rem;position: relative; text-align: center;
} .player:focus-within {outline:solid 0.125rem #000; outline-offset: -0.1rem;}

.player-counter {
    position: absolute;top: 1rem;left: unset;right: 1rem;width: 6ch;
}
.player-counter.up::before {
    animation: timer-countup 10s linear forwards;
    animation-play-state: paused;
    content: "0";display: inline-block;width: 2ch;
    font-weight: bold;
} 

small {font-size: calc(0.667rem * var(--base-font-size));}

/* btn-multi outlines the other btn; reset defaults to nothing outlined */
.btn:focus,
#tg_play:checked ~ .btn-multi > .btn[for='tg_pause']:focus,
#tg_pause:checked ~ .btn-multi > .btn[for='tg_play']:focus {
    outline: 0.3125rem dashed var(--reduct-red);
	outline-offset:0.1875rem;
} 


/* 
------------------------
  Play / Pause Toggle
------------------------
*/

/* creates 'toggle'-like play/pause button from individual buttons */
.btn-multi {
    animation: show-hide 10s linear forwards;
    animation-play-state: paused;
}
.btn-multi > :not(.default) {display: none}

/* By default, these animations are 'paused', so the 'pause' btn just means 'not running' */
#tg_play:checked ~ .btn-multi,
#tg_play:checked ~ .player-counter.up::before {
    animation-play-state: running; 
}

/* hides own label btn */
#tg_play:checked ~.btn-multi > .btn[for='tg_play'] {
    display: none;
}
/* shows other label btn */
#tg_play:checked ~.btn-multi > .btn[for='tg_pause'] {
    /* from .btn class */
    display: inline-flex;
}

/* 
------------------------
      Reset Button
------------------------
*/

/* By default, this animation is 'paused', so the 'pause' btn just means 'not running' */
.btn[for='tg_reset'] {
    animation: hide-show 2s linear backwards;
    animation-play-state: paused;
}
#tg_play:checked ~ .btn[for='tg_reset'] {
    animation-play-state: running; 
}
/* reset animation */
#tg_reset:checked ~ .btn-multi,
#tg_reset:checked ~ .btn[for='tg_reset'],
#tg_reset:checked ~ .player-counter.up::before {
    animation-name: none;
}
#tg_reset:checked ~ .btn[for='tg_reset'] {
    visibility: hidden;
}

/* 
------------------------
    Graph Animation
------------------------
*/


#bar-cts, #bar-prd-monthly, #bar-prd-daily {
    --scaling-factor: calc(1 * 6);
    animation: grow-exp-cts-vert 10s linear forwards;
    animation-play-state: paused;
    transform-box: fill-box;
    transform-origin: bottom;
}
#bar-prd-monthly, #bar-prd-daily {
    --scaling-factor: calc(0.9613 * 6);
    animation: grow-exp-cts-vert 10s steps(12, end) forwards;
    animation-play-state: paused;
}
#bar-prd-daily {
    --scaling-factor: calc(0.98 * 6);
    animation-timing-function: steps(365,end);
}

#tg_play:checked ~ svg #bar-cts,
#tg_play:checked ~ svg #bar-prd-monthly,
#tg_play:checked ~ svg #bar-prd-daily {
    animation-play-state: running;
}
#tg_reset:checked ~ svg #bar-cts,
#tg_reset:checked ~ svg #bar-prd-monthly,
#tg_reset:checked ~ svg #bar-prd-daily {
    animation-name: none;
}