:root {
    --cmp-chart-grid-line-width: 0.0625rem;
}

.ax-chart-table {
    overflow: hidden;
}

@media (max-width: 47.9375rem) {
        .ax-chart-table--responsive .ax-chart-table__grid-line:nth-child(even),
        .ax-chart-table--responsive .ax-chart-table__axis-label:nth-child(even) {
            visibility: hidden;
        }
}

.ax-chart-table__rows-container {
    padding-right: var(--cmp-chart-overflow-space);
}

.ax-chart-table__row {
    display: flex;
    align-items: center;
    margin-right: calc(var(--cmp-chart-overflow-space) * -1);
    border-radius: var(--component-border-radius);
    transition-property: background-color;
    transition-duration: var(--transition-time-base);
    transition-timing-function: var(--transition-function);
}

.ax-chart-table__row--hover {
    background: var(--color-theme-background--hover);
}

.ax-chart-table__grid-container {
    position: relative;
    transition-property: width;
    transition-duration: var(--transition-time-slow);
    transition-timing-function: var(--transition-function);
}

.ax-chart-table__rows-container--space-x1 .ax-chart-table__grid-container,
    .ax-chart-table__rows-container--space-x1 .ax-chart-table__row {
        padding: var(--spacing-grid-size--x1) 0;
    }

.ax-chart-table__rows-container--space-x2 .ax-chart-table__grid-container,
    .ax-chart-table__rows-container--space-x2 .ax-chart-table__row {
        padding: calc(var(--spacing-grid-size--x3) * 0.5) 0;
    }

.ax-chart-table__rows-container--space-x3 .ax-chart-table__grid-container,
    .ax-chart-table__rows-container--space-x3 .ax-chart-table__row {
        padding: var(--spacing-grid-size--x3) 0;
    }

.ax-chart-table__grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.ax-chart-table__grid-line {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    flex-direction: column;
    justify-content: flex-end;
    border-left: var(--cmp-chart-grid-line-width) dotted var(--color-theme-border);
}

.ax-chart-table__xAxis-label {
    transform: translate(-50%, calc(100% + var(--cmp-chart-label-margin)));
}

.ax-chart-table__label {
    flex: 0 0 auto;
    padding-right: calc(var(--spacing-grid-size) * 2);
    padding-left: calc(var(--spacing-grid-size) * 6);
    color: var(--color-theme-text--subtle);
}

.ax-chart-table__visual {
    flex: 1 1 0%;
}

.ax-chart-table__collapse {
    display: inline-flex;
    margin-top: var(--cmp-chart-label-margin);
}