
/*
 * Location Stats List
 *
 * Structure:
 * .tb-snowreport-region-stats
 *     .tb-snowreport-region-stats-item (1 or many, most commonly 4)
 */

// Block
.tb-snowreport-region-stats {
    display: flex;
    flex-wrap: wrap;
    padding-top: config('padding.8');
    padding-bottom: config('padding.8');
}

// Make items use full available width but show 2 items next to each other
.tb-snowreport-region-stats .tb-snowreport-region-stats-item {
    width: 50%;

    @media screen and (max-width: 768px) {
        width: 100%;
    }
}

/*
 * Location Stats Item
 *
 * Structure:
 * .tb-snowreport-region-stats-item
 *     .tb-snowreport-region-stats-item__key
 *     .tb-snowreport-region-stats-item__icon
 *     .tb-snowreport-region-stats-item__value
 */

// Block
.tb-snowreport-region-stats-item {
    display: flex;
    align-items: center;
    padding: config('padding.2') config('padding.1');
    border-bottom: 1px solid #f0f0f0;
}

// Vertically center elements within block
.tb-snowreport-region-stats-item__key,
.tb-snowreport-region-stats-item__icon,
.tb-snowreport-region-stats-item__value {
    display: inline-flex;
    align-items: center;
}

// Key text width
.tb-snowreport-region-stats-item__key {
    width: 45%;
    max-width: 225px;
}

// Icon size, spacing and default color
.tb-snowreport-region-stats-item__icon {
    margin-right: config('margin.6');
    font-size: 1.25em;
    color: #bbb;
}

// No default styles required for the value text
.tb-snowreport-region-stats-item__value {}
