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

#one.progress {
    
    position: fixed;
    left: 50%;
    bottom: 5%;
    z-index:5555;
    transform: translate(-50%, -5%);
    --progress:0;
    --corner: calc(1% * var(--progress, 0));
    --color: #58B473; // Default green color, can be overridden via inline style: --color
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    box-shadow: inset 0 0 1px #666, 0 0 30px black;
    background-color: transparent;
    background-image:
        radial-gradient(circle,
            #222 0% 27%,
            #333,
            transparent 28% 50%,
            #333,
            #222 51%),
        repeating-conic-gradient(rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.2) 4.5%,
            transparent 5%),
        conic-gradient(var(--color) 0% var(--corner),
            transparent var(--corner));
    
    animation: progress 10s forwards reverse;
    &::before {
        content: attr(data-label);
        position: absolute;
        color: var(--color);
        font-weight: bold;
        z-index: 1;
    }
}


/* @keyframes progress {
    from {
            --progress: var(0);
        }
            to {
                --progress: 1;
                }
          
}
 */
// Color variants based on data attributes
#one.progress[data-color="red"] {
    --color: #D64E42;
}

#one.progress[data-color="yellow"] {
    --color: #F5B848;
}

#one.progress[data-color="green"] {
    --color: #58B473;
}

// Default labels based on progress ranges (can be overridden via data-label attribute)
#one.progress[data-progress-range="low"]::before {
    content: "0%";
}

#one.progress[data-progress-range="med"]::before {
    content: "med";
}

#one.progress[data-progress-range="high"]::before {
    content: "high";
}

#one.progress[data-progress-range="complete"]::before {
    content: "go!";
}

// Modal body transition overlay — locks height and shows centered spinner
#exampleModal .modal-body {
    position: relative;
}

.indform-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.88);
    z-index: 10;
    border-radius: 4px;

    .indform-loader-text {
        margin: 0;
        font-size: 0.9rem;
        color: #555;
        text-align: center;
        padding: 0 1rem;
    }
}