/*

  Flux GAUGE controls
  (c) 2023 by Reality2 Pty Ltd

*/

flux-power {
    --border-radius: .15em;
    --overall-background: hsl(240, 5%, 21%);
    --gap-outlines: 1.5px solid #333;
    
    font-family: 'Arial', sans-serif;   
    font-size: 1.5em;
    font-weight: 700;
    display:grid;
    grid-template-columns: 1fr 1fr;
    /*line-height: 1;*/
    color:hsl(240, 5%, 80%);
    /*width:25ch;*/
    /*gap:1px;*/

    background: var(--overall-background);
    padding: .3em;
    border-radius: .2em;
    
}
    flux-power flux-title{
        grid-column: 1 / -1;
        display:flex;
        flex-direction: column;
        align-items: center;
        padding:.5em;
        letter-spacing: .3em;
        border-radius: var(--border-radius);
        background:hsl(240, 5%, 31%);
        color:hsl(240, 5%, 90%);
        outline:var(--gap-outlines);
    }
    flux-power flux-title small {
        font-size: .6em;
        color:#999;
        letter-spacing: 0;
        font-weight: 300;
    }
    flux-power flux-gauge{
        grid-column: 1 / -1;
        border-radius: var(--border-radius);
        padding:.5em;
        background:hsl(240, 5%, 31%);
        outline:var(--gap-outlines);
    }
    flux-power flux-value{
        border-radius: var(--border-radius);
        padding:.5em;
        background:hsl(240, 5%, 31%);
        outline:var(--gap-outlines);
    }
    flux-power flux-value[row="true"]{
        grid-column: 1 / -1;
    }

/*
    TITLE
*/
flux-title{
    display:flex;
    justify-content: center;
    font-size: 1.2em;
}

/*
    GAUGE
*/
flux-gauge{
    --percentage:33;
    --fill: #00acc1;
    --gap-fill: var(--overall-background);
    --stroke-width: 3em;
    --donut-opacity: 1;
    
    position: relative;
    display:flex;
    flex-direction: column;
    font-size: .9em;
    justify-content: flex-end;
    align-items: center;
    isolation: isolate;
    box-sizing: border-box;
    aspect-ratio: 1 / .5;
    overflow: clip;
}
    /* round gauge displaying --percentage */
    flux-gauge:before{
        content: '';
        position: absolute;
        box-sizing: border-box;
        inset:.75em;
        height:calc( 200% - 1.5em );
        opacity: var(--donut-opacity);
        border:var(--stroke-width) solid;
        border-color: var(--gap-fill) var(--gap-fill) var(--fill) var(--fill);
        border-radius: 50%;
        /*transform:rotate(-45deg);*/
        transform:rotate( calc(1deg * ( -45 + var(--percentage) * 1.8)) );
    }
    /* [title] in left upper corner */
    flux-gauge[title]:after{
        content: attr(title);
        position: absolute;
        font-size: .6em;
        font-weight: 300;
        color:#999;
        left:.3em;
        top:.3em;
        z-index:-1;
    }
    
    
/*
    VALUE
*/    
flux-value{
    font-weight: 300;
    position: relative;
    height:2em;
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
    line-height: 1;
    isolation: isolate;
}
    flux-value[title]:after{
        content: attr(title);
        position: absolute;
        font-size: .6em;
        font-weight: 300;
        color:#aaa;
        left:.3em;
        top:.3em;
        z-index: -1;
    }
    flux-value > flux-unit {font-size:.7em;font-weight: 300;margin-left:.5em;margin-bottom: .5em;color:#bbb;}