
/*
 * Service Stats List
 *
 * Structure:
 * .tb-snowreport-service-stats
 *     .tb-snowreport-service-stats-item (1 or many)
 */

// Block
.tb-snowreport-service-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.tb-snowreport-service-stats .tb-snowreport-service-stats-item {
    width: 25%;

    @media screen and (max-width: 767px) {
        width: 50%;
        margin-top: config('margin.1');
        margin-bottom: config('margin.1');
    }
}

/*
 * Service Stats List Item
 *
 * Structure:
 * .tb-snowreport-service-stats-item
 *     .tb-snowreport-service-stats-item__label
 *     .tb-snowreport-service-stats-item__circle
 *     .tb-snowreport-service-stats-item__value
 */

// Block
.tb-snowreport-service-stats-item {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: config('padding.2');
    padding-bottom: config('padding.2');
    text-align: center;
}

.tb-snowreport-service-stats-item__label {
    display: block;
    padding-bottom: config('padding.3');
}

// circular progress bar (pure svg) inspired by https://codepen.io/xgad/post/svg-radial-progress-meters
.tb-snowreport-service-stats-item__circle svg {
    transform: rotate(-90deg);
    height: 80px;
    width: 80px;

    circle {
        fill: none;
        stroke-width: 5;
    }

    // default background color
    .tb-snowreport-service-stats-item__circle-background {
        stroke: #f0f0f0;
    }

    // default active color
    .tb-snowreport-service-stats-item__circle-progress {
        stroke: #6da0f2;
    }
}

.tb-snowreport-service-stats-item__value {
    display: block;
    padding-top: config('padding.1');
    font-size: config('textSizes.sm');
}
