.chartkit-table-bar {
    position: relative;
    left: calc(-1 * var(--chartkit-bg-bar-offset-width) / 2);
    margin-right: calc(-1 * var(--chartkit-bg-bar-offset-width));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: calc(100% + var(--chartkit-bg-bar-offset-width));
    padding-right: 5px;
    z-index: 0;

    &__block {
        position: absolute;
        z-index: -1;
        left: 0;
        text-align: left;
        height: var(--dl-table-cell-bar-height, 19px);
    }

    &__separator {
        position: absolute;
        display: inline-block;
        width: 0;
        height: 130%;
        border-right: 1px solid var(--g-color-text-complementary);
        margin-top: calc(-0.15 * var(--dl-table-cell-bar-height, 19px));
    }
}

:root {
    // Bar width offset
    // ┌────────┐     ┌────────┐     ┌────────┐
    // │▒▒▒▒▒▒▒▒│    ▒▒▒▒▒▒▒▒▒▒▒▒    │ ▒▒▒▒▒▒ │
    // └────────┘     └────────┘     └────────┘
    //     0             > 0            < 0
    --chartkit-bg-bar-offset-width: 0;
}
