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

.chart-row,
.chart-axis,
.chart-gridlines {
    align-items: center;
    @include small {
        // display: flex;
        // flex-direction: column;
        padding: var(--halfSpacing) 0;
        display: grid;
        column-gap: var(--halfSpacing);
        row-gap: var(--quarterSpacing);
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
        grid-template-areas:
            'heading metadata'
            'content content';
    }
    @include medium-large {
        display: grid;
        grid-template-columns: subgrid;
        grid-column-start: 1;
        grid-column-end: 4;
        // gap: 20px;
        // grid-template-areas: 'heading content metadata';
    }
}

.chart-rows-zebra {
    .chart-row:nth-child(2n) {
        @include small {
            background-color: color-mix(in srgb, var(--backgroundAltColor) 50%, transparent);
        }
        @include medium-large {
            .chart-row-content {
                background-color: color-mix(in srgb, var(--backgroundAltColor) 50%, transparent);
            }
        }
    }
}

.chart-row {
    &-grouped {
        background: #ffffff11;
    }
    &-overall {
        background: #ffffff22;
    }
}

.chart-row-content {
    padding: var(--halfSpacing) 0;
    position: relative;
    // height: calc(var(--barHeight) + var(--spacing));
    // height: var(--barHeight);
}

.chart-bar {
    position: relative;
    height: var(--barHeight);
    left: calc(var(--rowOffset) * -1px);
}

.chart-row-freeform-icon-wrapper {
    position: absolute;
    left: calc(var(--offset) * 1% + 7px);
    height: var(--barHeight);
    display: flex;
    align-items: center;
}
.chart-row-freeform-icon {
    display: block;
    opacity: 0.5;
}

.chart-row-left {
    grid-area: heading;
}
.chart-row-content {
    grid-area: content;
    @include small {
        padding: 0;
    }
}
.chart-row-right {
    grid-area: metadata;
    display: flex;
    align-items: center;
    gap: var(--spacing);
    @include small {
        justify-content: flex-end;
    }
}
