/*
    PURPOSE: To provide styling for various progress bars/step indicators
*/
/*#region --------------Progress Bars---------------*/
.progress {
    --bs-progress-height: 1em;
    --bs-progress-font-size: .875em;
    --bs-progress-bg: var(--medium);
    --bs-progress-border-radius: var(--bs-border-radius);
    --bs-progress-box-shadow: none;
    --bs-progress-bar-color: var(--white);
    --bs-progress-bar-bg: var(--primary);
    font-size: var(--bs-progress-font-size);
}
/*#endregion*/

/*#region --------------Progress Circles---------------*/
.progress-circle {
    position: relative;
    display: inline-block;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: var(--medium);
}

    .progress-circle:after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }

    .progress-circle .progress-label {
        font-size: 1rem;
        color: var(--body);
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        width: calc(8rem - 1rem);
        height: calc(8rem - 1rem);
        align-content: center;
        margin-left: calc((8rem - 1rem) * -0.5);
        margin-top: calc((8rem - 1rem) * -0.5);
        text-align: center;
        border-radius: 50%;
        background: var(--white);
        z-index: 1;
    }

    .progress-circle[aria-valuenow]::after {
        background: conic-gradient(var(--primary) 0% calc(attr(aria-valuenow %)), var(--medium) 0 100%);
    }
/*#endregion*/


/*#region --------------Progress Circles---------------*/
.progress-half-circle-container {
    --size: 8rem;
    --thickness: 1rem;
    overflow: hidden;
    position: relative;
    width: var(--size);
    height: calc(var(--size)/2);
}

.progress-half-circle .progress-bar {
    width: var(--size);
    height: calc(var(--size)/2);
    background-color: white;
    border-top-left-radius: calc(var(--size)*2);
    border-top-right-radius: calc(var(--size)*2);
    border: var(--thickness) solid var(--primary);
    border-bottom: 0;
    transition: all 1s ease;
    transform-origin: bottom;
    position: absolute;
    z-index: 1;
    transform: rotate(calc(var(--value)*180deg - 180deg));
    content: '';
    bottom: 0;
    left: calc(var(--thickness)*-1);
}

.progress-half-circle {
    z-index: 1;
    width: var(--size);
    height: calc(var(--size)/2);
    background-color: white;
    border-top-left-radius: calc(var(--size)*2);
    border-top-right-radius: calc(var(--size)*2);
    border: var(--thickness) solid var(--medium);
    border-bottom: 0;
    position: relative;
}