.pxl--progressbar {
    @include transition(width 1.4s ease);
    width: 0;
    &.vertical {
        @include transition(height 1.4s ease);
        height: 0;
    }
}
.pxl-progressbar-1 {
    .pxl--progressbar {
        height: 6px;
        position: relative;
        border-radius: 100px;
        background-color: $primary_color;
        top: 0;
    }
    .pxl--holder {
        background-color: #E7E7E7;
        height: 6px;
        border-radius: 100px;
    }
    .pxl--percentage {
        font-size: 15px;
        color: #0A0A0B;
        font-weight: 600;
        @extend .ft-theme-default;
    }
    .pxl--title {
        font-weight: 600;
        font-size: 16px;
        flex-grow: 1;
        margin-bottom: 0;
    }
    .pxl--meta {
        margin-bottom: 5px;
    }
    .pxl--item {
        + .pxl--item {
            margin-top: 28px;
        }
    }
}

.pxl-progressbar-2 {
    .pxl--progressbar {
        border-radius: 20px;
        height: 9px;
        position: relative;
        @include background-gradient-rotate(to right, $gradient_color_from 0%, $gradient_color_to 100%);        
        top: 3px;
        left:3px;
    }
    .pxl--holder {
        border-radius: 20px;
        border:1.5px solid #EDEDED;
        height: 18px;
    }
    .pxl--percentage {
        font-size: 16px;
        color: #194341;
        font-weight: 600;        
    }
    .pxl--title {
        font-weight: 600;
        font-size: 16px;
        flex-grow: 1;
        margin-bottom: 0;
    }
    .pxl--meta {
        margin-bottom: 5px;
    }
    .pxl--item {
        + .pxl--item {
            margin-top: 28px;
        }
    }
}
