/* Flip direction in percent bar cells, to fit multiple bars when collapsed */
.b-bryntum .b-percent-bar-cell {
    justify-content   : center;
    flex-direction    : column;

    --b-grid-cell-gap : 0;
}

.b-percent-bar-outer {
    transition : max-height .2s linear, opacity .2s !important;
    opacity    : 1;

    /* Hide all bars except first one by clipping them out using max height */
    &:not([data-index="0"]) {
        --b-percent-column-bar-max-height : 0;
        border                            : none;
    }
}

/* Cls set when the Air Quality Metrics column is collapsed */
.multivalues {
    /* Grow clipped bars into visibility */
    .b-percent-bar-cell {
        --b-grid-cell-gap : 0.5em;

        &:not(.b-expanding) .b-percent-bar-outer {
            --b-percent-column-bar-max-height : 5px;
            border                            : var(--b-percent-column-bar-border);
        }
    }

    /* Hide all bars except first one directly on expand, cls is removed when fully expanded */
    &.b-expanding-column .b-percent-bar-cell.b-expanding {
        transition        : min-width .2s, max-width .2s, width .2s, flex .2s, padding .2s, gap .2s !important;
        --b-grid-cell-gap : 0;

        .b-percent-bar-outer:not([data-index="0"]) {
            opacity : 0;
        }
    }
}

[data-field=pm25] {
    --b-percent-column-fill-background : var(--b-color-amber);
}

[data-field=pm10] {
    --b-percent-column-fill-background : var(--b-color-orange);
}

[data-field=no2] {
    --b-percent-column-fill-background : var(--b-color-blue);
}

[data-field=ozone] {
    --b-percent-column-fill-background : var(--b-color-yellow);
}

.weather span {
    font-size : 2em;
}