.fw-svg-bar-chart {
    width: 100%;
    color: currentColor;
    --fw-chart-y-label-width: 42px;
    --fw-chart-bar-duration: 750ms;
}

.fw-svg-bar-chart__header {
    margin-bottom: 20px;
}

.fw-svg-bar-chart__title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}

.fw-svg-bar-chart__subtitle {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.75;
}

.fw-svg-bar-chart__body {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.fw-svg-bar-chart__y-axis-title {
    display: flex;
    flex: 0 0 var(--fw-chart-y-label-width);
    align-items: center;
    justify-content: center;
    width: var(--fw-chart-y-label-width);
    overflow: visible;
}

.fw-svg-bar-chart__y-axis-title-text {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: center;
}

.fw-svg-bar-chart__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.fw-svg-bar-chart__svg {
    display: block;
    max-width: none;
}

.fw-svg-bar-chart__grid-line {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.12;
    vector-effect: non-scaling-stroke;
}

.fw-svg-bar-chart__axis {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.35;
    vector-effect: non-scaling-stroke;
}

.fw-svg-bar-chart__bar {
    opacity: 0.9;
    transition:
        transform var(--fw-chart-bar-duration) ease,
        opacity 0.2s ease;
}

.fw-svg-bar-chart__bar:hover {
    opacity: 1;
}

.fw-svg-bar-chart__bar--color-1 {
    fill: #2563eb;
}

.fw-svg-bar-chart__bar--color-2 {
    fill: #16a34a;
}

.fw-svg-bar-chart__bar--color-3 {
    fill: #f97316;
}

.fw-svg-bar-chart__bar--color-4 {
    fill: #dc2626;
}

.fw-svg-bar-chart__bar--color-5 {
    fill: #7c3aed;
}

.fw-svg-bar-chart__bar--color-6 {
    fill: #0891b2;
}

.fw-svg-bar-chart__bar--color-7 {
    fill: #ca8a04;
}

.fw-svg-bar-chart__bar--color-8 {
    fill: #db2777;
}

.fw-svg-bar-chart__bar--color-9 {
    fill: #4f46e5;
}

.fw-svg-bar-chart__bar--color-10 {
    fill: #059669;
}

.fw-svg-bar-chart__x-text,
.fw-svg-bar-chart__y-text,
.fw-svg-bar-chart__bar-value {
    fill: currentColor;
    font-size: 12px;
}

.fw-svg-bar-chart__bar-value {
    font-weight: 600;
}

.fw-svg-bar-chart--animate .fw-svg-bar-chart__bar {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: bottom;
    transition-delay: var(--fw-chart-item-delay, 0ms);
}

.fw-svg-bar-chart--animate .fw-svg-bar-chart__item.is-visible .fw-svg-bar-chart__bar {
    transform: scaleY(1);
}

.fw-svg-bar-chart--animate .fw-svg-bar-chart__bar-value {
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
    transition-delay: calc(var(--fw-chart-item-delay, 0ms) + var(--fw-chart-bar-duration));
}

.fw-svg-bar-chart--animate .fw-svg-bar-chart__item.is-visible .fw-svg-bar-chart__bar-value {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .fw-svg-bar-chart--animate .fw-svg-bar-chart__bar {
        transform: scaleY(1);
        transition: none;
    }

    .fw-svg-bar-chart--animate .fw-svg-bar-chart__bar-value {
        opacity: 1;
        transform: none;
        transition: none;
    }
}