﻿.charts-css.column {
    --header-height: 2rem;
    --labels-size: var(--header-height);
    --labels-align-inline: center;
    --row-padding: 0.5rem;
}

    .charts-css.column caption {
        padding-bottom: 0.5rem;
    }

        .charts-css.column caption > span{
            padding-left: 0.5rem;
        }

    .charts-css.column tbody tr {
        padding-left: var(--row-padding);
        padding-right: var(--row-padding);
    }

    .charts-css.column:not(.stacked) tbody tr td {
        transition: opacity 0.3s ease, height 0.5s ease, background-color 0.3s ease;
        flex-grow: 1;
    }

    .charts-css.column.stacked tbody tr td {
        transition: opacity 0.3s ease, height 0.5s ease, background-color 0.3s ease;
    }

    .charts-css.column:not(.has-selected-row) tbody:has(tr:hover) td {
        opacity: 0.8;
    }

    .charts-css.column tbody tr:not(.selected-row) {
        cursor: pointer;
    }

    .charts-css.column tbody tr th {
        padding-bottom: 0.5rem;
        font-weight: unset;
    }

    .charts-css.column tbody tr.selected-row td,
    .charts-css.column tbody tr:hover td,
    .charts-css.column tbody:has(tr:hover) tr:hover td {
        opacity: 1;
    }

    .charts-css.column tbody:has(tr.selected-row) tr:hover td {
        opacity: 0.8;
    }

    .charts-css.column tbody tr th:before {
        transition: height 0.2s ease-in;
        content: "";
        position: absolute;
        height: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--green);
    }

    .charts-css.column tbody tr.selected-row th:before {
        height: 5px;
    }

    .charts-css.column tbody tr td:nth-of-type(1) {
        background-color: var(--green);
    }

    .charts-css.column tbody tr td:nth-of-type(2) {
        background-color: var(--primary);
    }

    .charts-css.column tbody:has(tr.selected-row) tr:not(:hover):not(.selected-row) td {
        filter: grayscale();
        opacity: 60%;
    }

    .charts-css.column.stage-colours tbody tr td:nth-of-type(1) {
        background-color: var(--green);
    }

    .charts-css.column.stage-colours tbody tr td:nth-of-type(2) {
        background-color: var(--yellow);
    }

    .charts-css.column.stage-colours tbody tr td:nth-of-type(3) {
        background-color: var(--pink);
    }

    .charts-css.column.stage-colours tbody tr td:nth-of-type(4) {
        background-color: var(--blue);
    }