// design/backend/templates/views/index/components/analytics_section/analytics_card/bar_chart.tpl

.analytics-card-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analytics-card-bar-chart__title {
    font-size: @fontSizeSmall;
    font-weight: bold;
    text-transform: uppercase;
}

.analytics-card-bar-chart__content {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.analytics-card-bar-chart__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analytics-card-bar-chart__item-info {
    display: flex;
    justify-content: space-between;
}

.analytics-card-bar-chart__item-values {
    display: flex;
    gap: 4px;
}

.analytics-card-bar-chart__item-total {
    color: spin(desaturate(lighten(@textColor, 30%), 25%), -15%); // textMutedColor
}

.analytics-card-bar-chart__item-total:before {
    content: '/';
    margin-right: 4px;
}

.analytics-card-bar-chart__item-progress {
    margin: 0;
    height: 22px;
    border-radius: @borderRadiusSmall;
}

.analytics-card-bar-chart__item-bar.analytics-card-bar-chart__item-bar {
    background: @dashboardSecondaryColor;
}

.analytics-card-bar-chart__item-bar--primary.analytics-card-bar-chart__item-bar--primary {
    background: @dashboardPrimaryColor;
}

.analytics-card-bar-chart__item-bar--danger.analytics-card-bar-chart__item-bar--danger {
    background: @errorText;
}
