.chart-axis-vertical {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1/2;
    .chart-axis-inner {
        height: 100%;
    }
    .chart-axis-ticks {
        position: relative;
        // height: 30px;
        // display: grid;
        // grid-template-columns: repeat(auto-fit, minmax(1%, 1fr));
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        height: 100%;
        // display: grid;
        // grid-template-rows: repeat(auto-fit, minmax(1%, 1fr));
    }
    .chart-axis-tick {
        position: relative;
        height: 1px;
        &::after {
            position: absolute;
            display: block;
            content: ' ';
            height: 1px;
            width: 10px;
            background: var(--borderAltColor);
            top: -0px;
        }
    }
    .chart-axis-tick-label {
        transform: translateY(-50%);
        // position: absolute;
        // top: 0px;
        // color: var(--textAltColor);
        // .chart-axis-top & {
        //     // top: -30px;
        // }
    }
    .chart-axis-label {
        // margin-top: var(--spacing);
        // display: flex;
        // justify-content: center;
    }
}
.chart-axis-left {
    grid-column: 1/2;

    .chart-axis-inner {
        border-right: 1px dotted var(--borderAltColor);
    }
    .chart-axis-tick {
        padding-right: 15px;
        &::after {
            right: -5px;
        }
    }
}
.chart-axis-right {
    grid-column: calc(var(--totalColumns) + 2) / span 1;

    .chart-axis-inner {
        border-left: 1px dotted var(--borderAltColor);
    }
    .chart-axis-tick {
        padding-left: 15px;
        &::after {
            left: -5px;
        }
    }
}
