
.radial-meter.complete
.outer {
    display: none;
}
.radial-meter.incomplete
.outer {
    display: block;
}
.radial-meter {
    position: relative;
    height: 80%;
    aspect-ratio: 1 / 1;
    --bg-color: var(--main-contrast-color);
    --bar-color: var(--main-bg-color);
    --outline-thinness: 80%;
    --thinness: 50%;
    .outline {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--main-contrast-color);
    }
    .outer {
        width: var(--outline-thinness);
        height: var(--outline-thinness);
        position: relative;
        left: calc(calc(100% - var(--outline-thinness))/2);
        top: calc(calc(100% - var(--outline-thinness))/2);
        background: conic-gradient(from 0deg, var(--bar-color) 0%, var(--bar-color) 0% var(--prog), var(--bg-color) var(--prog), var(--bg-color) 100%);
        /* background-color: blue; */
        border-radius: 50%;
    }
    .inner {
        background-color: var(--bg-color);
        width: var(--thinness);
        height: var(--thinness);
        position: relative;
        left: calc(calc(100% - var(--thinness))/2);
        top: calc(calc(100% - var(--thinness))/2);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}



.resizer-bar.ew {
    border: dashed 1px var(--main-contrast-color);
    min-width: 10px;
    max-width: 10px;
    cursor: ew-resize;
}
.resizer-bar.ns {
    border: dashed 1px var(--main-contrast-color);
    min-height: 10px;
    max-height: 10px;
    cursor: ns-resize;
}