@import '../../../../stylesheets/_breakpoints.scss';

.chart-column {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1/3;
    grid-column: var(--columnStart) / var(--columnEnd);
    // grid-template-columns: subgrid;
    // &:nth-child(1 of .chart-column) {
    //     padding-left: var(--doubleSpacing);
    // }
    // &:nth-last-child(1 of .chart-column) {
    //     padding-right: var(--doubleSpacing);
    // }
    min-width: 0;
}
.chart-column {
    .chart-bar,
    .chart-faceted-bar {
        position: relative;
        height: 100%;
    }
}
.vertical-chart-cell {
    position: absolute;
    background: linear-gradient(to top, var(--color1), var(--color2));
    width: 100%;
    height: calc(var(--height) * 1%);
    bottom: calc(var(--offset) * 1%);
}
.chart-column-highlightActive {
    .chart-cell-notHighlighted {
        opacity: 0.2;
    }
}

.chart-column {
    &:nth-child(2n of .chart-column) {
        .chart-column-content {
            background-color: color-mix(in srgb, var(--backgroundAltColor) 50%, transparent);
        }
    }
}
.chart-column-content {
    // grid-row-start: 1;
    // grid-row-end: 2;
    // TODO: make padding dynamic somehow depending on number of bars?
    padding: 0 var(--quarterSpacing);
}
.chart-column-bottom {
    grid-row: 2 / 3;
    position: relative;
}
.chart-column-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    text-align: center;
    @include small {
        .chart-column:nth-child(2n) & {
            display: none;
        }
    }
}
