.charts-css.bar {
    height: min-content;
    --header-width: 7rem;
    --secondary-label-width: 3rem;
    --labels-size: var(--header-width);
    --labels-align-inline: left;
    --row-padding: 0.5rem;
    --bar-height: 1.5rem;
}

    .charts-css.bar tbody {
        padding-right: 3.5rem;
    }

        .charts-css.bar caption {
            padding-bottom: 0.5rem;
        }

            .charts-css.bar caption > span{
                padding-left: 0.5rem;
            }

        .charts-css.bar tbody tr {
            padding-block-start: var(--row-padding);
            padding-block-end: var(--row-padding);
        }

            .charts-css.bar tbody tr:has(> td:first-of-type:last-of-type) {
                min-height: calc(2px + var(--bar-height) + (var(--row-padding) * 2));
            }

            .charts-css.bar tbody tr:has(> td:nth-of-type(2):last-of-type) {
                min-height: calc(2px + (var(--bar-height) * 2) + (var(--row-padding) * 2));
            }

        .charts-css.bar tbody:not(.stacked) tr td {
            transition: opacity 0.3s ease, width 0.5s ease, background-color 0.3s ease;
            min-height: var(--bar-height);
            flex-grow: 0;
        }

    .charts-css.bar:not(.has-selected-row) tbody:has(tr:hover) td {
        opacity: 0.8;
    }

    .charts-css.bar tbody tr:not(.selected-row) {
        cursor: pointer;
    }

    .charts-css.bar tbody tr th {
        padding-left: 0.5rem;
        font-weight: unset;
    }

    .charts-css.bar tbody tr.selected-row td,
    .charts-css.bar tbody tr:hover td,
    .charts-css.bar tbody:has(tr:hover) tr:hover td {
        opacity: 1;
    }

    .charts-css.bar tbody:has(tr.selected-row) tr:hover td {
        opacity: 0.8;
    }

    .charts-css.bar tbody tr th:before {
        transition: width 0.2s ease-in;
        content: "";
        position: absolute;
        width: 0;
        left: -5px;
        top: 0;
        bottom: 0;
        background-color: var(--green);
    }

    .charts-css.bar tbody tr.selected-row th:before {
        width: 5px;
    }

    .charts-css.bar.multiple tbody tr td:nth-of-type(1) {
        background-color: var(--green);
    }

    .charts-css.bar.multiple tbody tr td:nth-of-type(2) {
        background-color: var(--primary);
    }

    .charts-css.bar.multiple tbody:has(tr.selected-row) tr:not(:hover):not(.selected-row) td {
        filter: grayscale();
        opacity: 60%;
    }

    .charts-css.bar .data:not(.outside) {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

    .charts-css.bar:not(.reverse) tbody tr td .data.outside {
        -webkit-transform: translateX(calc(100% + 0.5rem));
        transform: translateX(calc(100% + 0.5rem));
        white-space: nowrap;
    }

    .charts-css.bar.labelled tr {
        --labels-size: calc(var(--header-width) + var(--secondary-label-width));
    }

        .charts-css.bar.labelled tr th {
            padding-right: 3rem;
        }

    .charts-css.bar.labelled td::before {
        content: attr(data-label);
        position: absolute;
        left: -2rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .charts-css.bar.show-labels:not(.reverse):not(.reverse-labels) tbody tr th {
        display: inline-block;
        text-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        align-self: center;
    }

/* Ready for when we need to add the DfE indicator */
/* .charts-css.bar tbody tr::after {
  content: '';
  position: absolute;
  inline-size: 100%;
  block-size: 2px;
  background: black;
  left: calc(75% - 2px);
  top: -1;
  width: 2px;
  height: calc(100% + 2px);
  z-index: 1;
} */