[data-swift-bar-chart] {
    --swift-chart-height: 18rem;
    --swift-chart-gap: 0.25rem;
    --swift-chart-bar-width: 3.25rem;
    --swift-chart-grid-color: color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    --swift-chart-bar-start: #3f7df1;
    --swift-chart-bar-end: #9b7cf6;
    --swift-chart-hover-bg: color-mix(in srgb, var(--bs-body-bg) 35%, var(--bs-body-color) 8%);
    min-height: calc(var(--swift-chart-height) + 1.75rem);

    .chart-layout {
        grid-template-columns: minmax(2.5rem, auto) minmax(0, 1fr);
        gap: 0.875rem;
    }

    .chart-axis {
        height: var(--swift-chart-height);

        .chart-axis-label {
            transform: translateY(50%);
        }
    }

    .chart-plot {
        height: calc(var(--swift-chart-height) + 1.75rem);

        .chart-grid-line {
            border-top: 1px dashed var(--swift-chart-grid-color);
        }
    }

    .chart-bars {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--swift-chart-gap);
    }

    .chart-column {
        grid-template-rows: var(--swift-chart-height) auto;
        color: inherit;
        min-width: 0;

        .chart-track {
            outline: none;
        }

        .chart-highlight {
            inset: 0 0.15rem 0;
            background: var(--swift-chart-hover-bg);
            opacity: 0;
            transition: opacity 180ms ease;
        }

        .chart-bar {
            width: min(100%, var(--swift-chart-bar-width));
            height: calc(var(--swift-chart-bar-height) * 1%);
            min-height: 0;
            border-radius: 0.45rem 0.45rem 0 0;
            background: linear-gradient(180deg, var(--swift-chart-bar-start) 0%, var(--swift-chart-bar-end) 100%);
            transition: transform 180ms ease, filter 180ms ease;
        }

        .chart-value-tooltip {
            bottom: calc((var(--swift-chart-bar-height) * 1%) + 1rem);
            transform: translate(-50%, 0.5rem);
            opacity: 0;
            transition: opacity 180ms ease, transform 180ms ease;
        }

        &:is(:hover, :focus-visible, .is-active) {
            .chart-value-tooltip {
                opacity: 1;
                transform: translate(-50%, 0);
            }

            .chart-highlight {
                opacity: 1;
            }

            .chart-bar {
                transform: translateY(-0.125rem);
                filter: saturate(1.06);
            }
        }

        &:focus-visible {
            outline: none;

            .chart-bar {
                box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 18%, transparent), 0 0.5rem 1rem rgba(63, 125, 241, 0.15);
            }
        }
    }
}