/* ==========================================================
   BA.UI - Histogram (ba-histogram.js)
   ========================================================== */

.ba-histogram {
    --ba-histogram-height: 150px;
    --ba-histogram-color: var(--ba-success, #2E7D32);
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 100%;
    height: var(--ba-histogram-height);
}

.ba-histogram__bin {
    flex: 1 1 0;
    min-width: 6px;
    height: var(--ba-bin-h, 0%);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-color: var(--ba-histogram-color);
    transition: height .25s ease, opacity .2s ease;
}

.ba-histogram__bin:hover {
    filter: brightness(1.12);
}

.ba-histogram__bin.is-muted {
    opacity: .25;
}