/*----------------------------------------
	46. progress-bar css
----------------------------------------*/
@use "../abstract" as *;

.progress {
    &__wrapper {
        display: grid;
        grid-template-columns: 48px auto;
        width: 100%;
        align-items: center;
        padding: 25px 30px;
        gap: 0 25px;
        @media #{$xs} {
            grid-template-columns: 40px auto;
            padding: 20px 10px;
            gap: 0 15px;
        }
    }

    &__title {
        font-size: 26px;
        font-weight: 400;
        color: var(--clr-common-black);
        position: absolute;
        left: 0;
        top: 0;
    }

    &__percent {
        font-size: 26px;
        color: #000;
        position: absolute;
        right: 0;
        font-weight: 400;
    }

    &__paragrap {
        position: absolute;
        margin-top: 50px;
    }

    &__bar-bg {
        background-color: #D9D9D9;
        animation: none 0s paused;
        position: relative;
        border-radius: 50px;
        width: 100%;
        margin-top: 50px;
    }

    &__border {
        display: flex;
        align-items: center;
        background-color: var(--clr-theme-2);
        border-radius: 50px;
        padding: 2px;
    }
}

.progress__thumb img {
    max-height: 48px;
    width: auto;
}

.figma {
    background-color: rgba(26, 188, 254, 0.05);

    .progress__title {
        color: #1abcfe;
    }

    .progress__border {
        background-color: #1abcfe;
    }

    .progress__percent {
        color: #1abcfe;
    }
}

.adobe-xd {
    background-color: rgba(255, 97, 246, 0.09);

    .progress__title {
        color: #ff61f6;
    }

    .progress__percent {
        color: #ff61f6;
    }

    .progress__border {
        background-color: #ff61f6;
    }
}

.invision {
    background-color: rgba(220, 57, 95, 0.07);

    .progress__title {
        color: #dc395f;
    }

    .progress__percent {
        color: #dc395f;
    }

    .progress__border {
        background-color: #dc395f;
    }
}

.sketch {
    background-color: rgba(253, 173, 0, 0.05);

    .progress__title {
        color: #fdad00;
    }

    .progress__percent {
        color: #fdad00;
    }

    .progress__border {
        background-color: #fdad00;
    }
}