prov-column-chart {
    @media print {
        break-inside: avoid;
        background: white !important;
    }

    position: relative;
    display: flex;
    height: 500px;
    min-width: 100%;
    width: min-content;
    gap: 1px;
    align-items: end;
    justify-content: end;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    padding: 0 1px;
    margin-bottom: 64px;

    >.column {
        @media print {
            background: #222 !important;
            border-color: #111 !important;
        }

        background: var(--prov-data-background, rgba(240, 128, 128, 0.5));
        width: 2%;
        min-width: 16px;
        height: var(--height);
        container-type: inline-size;
        display: flex;
        justify-content: center;
        align-items: end;
        border: 1px solid var(--prov-data-border, lightcoral);
        padding-bottom: 2px;
        border-bottom: none;
    }

    >.column>span {
        font-size: min(80cqi, 1.25rem);
        transform: rotate(-90deg);
        position: absolute;
        bottom: -6ch;
        width: 7ch;
        text-align: right;
    }
}

.gridline {
    font-size: 0.75rem;
    position: absolute;
    left: 0;
    right: 0;
    color: var(--gridline-color);
    border-bottom: 1px dashed currentColor;
    pointer-events: none;

    &.solid {
        border-bottom: 1px solid currentColor;
    }

    &::after {
        content: attr(data-value);
        position: sticky;
        left: 0;
        padding-left: 4px;
    }
}

.column-chart-container {
    @media print {
        break-inside: avoid;
    }

    overflow-x: auto;
    overflow-y: hidden;
    background: var(--prov-chart-background, white);
    border: 1px solid var(--prov-chart-border, gray);
    border-collapse: collapse;
}