/* -------------------------------------------
	Circle Progress Bar
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/direction';
@import '../../assets/sass/mixins/mixins';

.circular-bar {
    text-align: center;
    .circular-bar-chart {
        position: relative;
    }
    strong {
        display: block;
        text-align: center;
        width: 100%;
        font-weight: 600;
        font-size: 1.8rem;
        line-height: 3rem;
    }
    .bar-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    label {
        display: block;
        text-align: center;
        width: 100%;
        #{$left}: 10%;
        font-weight: 100;
        font-size: 4rem;
        line-height: 2rem;
    }

    &.only-icon i {
        display: block;
        width: 100%;
        text-align: center;
        font-weight: 600;
        font-size: 3rem;
        line-height: 3rem;
    }
}