:root {
    --column-spacing: calc(var(--spacing-grid-size) * 4);
}

.ax-column-chart {
    display: flex;
    flex-direction: column;
}

.ax-column-chart__bars {
    display: flex;
    flex: 1 1 0%;
    margin-right: var(--column-spacing);
}

.ax-column-chart__bars:last-child { margin-right: 0; }

.ax-column-chart__row {
    display: flex;
    flex: 1 1 0%;
}

.ax-column-chart__row:first-child { margin-top: 0; }

.ax-column-chart__row:last-child { margin-bottom: 0; }

.ax-column-chart__visual {
    display: flex;
    flex: 1 1 0%;
}

.ax-column-chart__x-axis {
    display: flex;
    flex: 0 0 auto;
    margin: calc(var(--spacing-grid-size) * 3) 0;
}

.ax-column-chart__x-axis:first-child { margin-top: 0; }

.ax-column-chart__x-axis:last-child { margin-bottom: 0; }

.ax-column-chart__x-axis-label {
    flex: 1 1 0%;
    margin-right: var(--column-spacing);
    text-align: center;
    pointer-events: none;
}

.ax-column-chart__x-axis-label:last-child { margin-right: 0; }

.ax-column-chart__y-axis {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
}

.ax-column-chart__y-axis--top { justify-content: flex-start; }
.ax-column-chart__y-axis--bottom { justify-content: flex-end; }