@import url('./_vars.css');


.eb-progress-bar-wrapper {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 1rem;
    position: sticky;
    top: 0;
}


@property --value {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.pie {
    --value: 20;
    --b: 22px;
    --col: darkred;
    --w: 7em;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    /* font-size: 25px; */
    font-size: calc(var(--w) / 6);
    font-weight: bold;
}

.pie:before,
.pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie:before {
    inset: 0;
    background:
        radial-gradient(farthest-side, var(--col) 98%, #0000) top/var(--b) var(--b) no-repeat,
        conic-gradient(var(--col) calc(var(--value)*1%), #0000 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side, #0000 calc(99% - var(--b)), #000 calc(100% - var(--b)));
}

.pie:before {
    background-color: var(--jmv-gray-soft);
}

.pie:after {
    inset: calc(50% - var(--b)/2);
    background: var(--col);
    transform: rotate(calc(var(--value)*3.6deg)) translateY(calc(50% - var(--w)/2));
}

.animate {
    animation: p 1s .5s both !important;
}

.no-round:before {
    background-size: 0 0, auto;
}

.no-round:after {
    content: none;
}

@keyframes p {
    from {
        --value: 0
    }
}

@media (max-width: 767.98px) {
    .pie{
        --b: 1em;
        --w: 6em;
    }
}