/*
=====================================================
 PM UI Framework
 Progress Components
 File: progress.css
 Version: 0.1.0
=====================================================
*/


/* --------------------------------------------------
   Progress Base
-------------------------------------------------- */

.pm-progress {
    width: 100%;
    height: 12px;
    overflow: hidden;
    background: var(--pm-gray-light, #eeeeee);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}


.pm-progress-bar {
    height: 100%;
    width: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;

    background: var(--pm-primary, #2E7D32);

    border-radius: inherit;

    transition:
        width .4s ease,
        background-color .3s ease;
}


/* --------------------------------------------------
   Progress Sizes
-------------------------------------------------- */

.pm-progress-sm {
    height: 6px;
}


.pm-progress-md {
    height: 12px;
}


.pm-progress-lg {
    height: 20px;
}

/* --------------------------------------------------
   Progress Color Variants
-------------------------------------------------- */


.pm-progress-primary .pm-progress-bar {
    background: var(--pm-primary, #2E7D32);
}


.pm-progress-secondary .pm-progress-bar {
    background: var(--pm-secondary, #1976D2);
}


.pm-progress-success .pm-progress-bar {
    background: #28a745;
}


.pm-progress-warning .pm-progress-bar {
    background: var(--pm-accent, #FFC107);
    color: #212121;
}


.pm-progress-danger .pm-progress-bar {
    background: #dc3545;
}


.pm-progress-info .pm-progress-bar {
    background: #17a2b8;
}



/* --------------------------------------------------
   Progress Gradient Styles
-------------------------------------------------- */


.pm-progress-gradient .pm-progress-bar {
    background: linear-gradient(
        90deg,
        var(--pm-primary, #2E7D32),
        var(--pm-secondary, #1976D2)
    );
}



/* --------------------------------------------------
   Animated Progress
-------------------------------------------------- */


.pm-progress-animated .pm-progress-bar {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%
    );

    background-size: 1rem 1rem;

    animation: pm-progress-animation 1s linear infinite;
}


@keyframes pm-progress-animation {

    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }

}

/* --------------------------------------------------
   Progress With Label
-------------------------------------------------- */


.pm-progress-label {
    position: relative;
}


.pm-progress-label .pm-progress-bar {
    min-width: 40px;
}



/* --------------------------------------------------
   Progress Text Overlay
-------------------------------------------------- */


.pm-progress-text {
    position: relative;
    width: 100%;
}


.pm-progress-text .pm-progress-bar {
    justify-content: flex-end;
    padding-right: 10px;
}



/* --------------------------------------------------
   Circular Progress
-------------------------------------------------- */


.pm-progress-circle {

    --pm-progress-size: 120px;
    --pm-progress-value: 75%;

    width: var(--pm-progress-size);
    height: var(--pm-progress-size);

    border-radius: 50%;

    background:
        conic-gradient(
            var(--pm-primary, #2E7D32) var(--pm-progress-value),
            var(--pm-gray-light, #eeeeee) 0
        );

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

}


.pm-progress-circle::before {

    content: "";

    position: absolute;

    width: calc(var(--pm-progress-size) - 20px);
    height: calc(var(--pm-progress-size) - 20px);

    background: #ffffff;

    border-radius: 50%;

}



.pm-progress-circle span {

    position: relative;

    z-index: 1;

    font-size: 1rem;
    font-weight: 700;

    color: var(--pm-text, #333333);

}

/* --------------------------------------------------
   Indeterminate Progress
-------------------------------------------------- */


.pm-progress-indeterminate .pm-progress-bar {

    width: 40%;

    animation: pm-progress-indeterminate 1.6s infinite ease-in-out;

}


@keyframes pm-progress-indeterminate {

    0% {
        transform: translateX(-120%);
    }

    50% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }

}



/* --------------------------------------------------
   Striped Progress
-------------------------------------------------- */


.pm-progress-striped .pm-progress-bar {

    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.18) 50%,
        rgba(255,255,255,.18) 75%,
        transparent 75%
    );

    background-size: 1rem 1rem;

}



/* --------------------------------------------------
   Disabled / Loading State
-------------------------------------------------- */


.pm-progress-loading {

    opacity: .65;

    pointer-events: none;

}



/* --------------------------------------------------
   Responsive
-------------------------------------------------- */


@media (max-width: 768px) {


    .pm-progress {

        height: 10px;

    }


    .pm-progress-lg {

        height: 16px;

    }


    .pm-progress-circle {

        --pm-progress-size: 90px;

    }


}



/* --------------------------------------------------
   Accessibility
-------------------------------------------------- */


.pm-progress[role="progressbar"] {

    overflow: hidden;

}


.pm-progress-bar:focus-visible {

    outline: 3px solid var(--pm-secondary, #1976D2);

    outline-offset: 2px;

}