.chartkit-table {
    --chartkit-bg-bar-offset-width: 10px;

    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;

    &_size {
        &_l {
            --data-table-row-height: 30px;
            --dl-table-font-size: 13px;
            --data-table-header-vertical-padding: 4px;
            --data-table-cell-vertical-padding: 5px;
            --data-table-cell-horizontal-padding: 10px;
            --dl-table-cell-bar-height: 19px;
            --chartkit-bg-bar-offset-width: 10px;
            line-height: 16px;
        }

        &_m {
            --data-table-row-height: 24px;
            --dl-table-font-size: 12px;
            --data-table-header-vertical-padding: 3px;
            --data-table-cell-vertical-padding: 4px;
            --data-table-cell-horizontal-padding: 6px;
            --chartkit-bg-bar-offset-width: 6px;
            --dl-table-cell-bar-height: 17px;
            line-height: 15px;
        }

        &_s {
            --data-table-row-height: 20px;
            --dl-table-font-size: 11px;
            --data-table-header-vertical-padding: 2px;
            --data-table-cell-vertical-padding: 3px;
            --data-table-cell-horizontal-padding: 4px;
            --chartkit-bg-bar-offset-width: 4px;
            --dl-table-cell-bar-height: 15px;
            line-height: 13px;
        }
    }

    &__body {
        overflow: auto;
        flex-grow: 0;
        flex-shrink: 1;
    }

    &__title {
        font-weight: bold;
        padding: 5px 40px 5px 0;
        text-align: right;
    }

    &__head-cell {
        white-space: pre-line;

        &_with-markup {
            font-weight: normal;
        }
    }

    &__cell {
        height: 100%;
        font-size: var(--dl-table-font-size);
        box-sizing: border-box;

        &_type_bar {
            // https://stackoverflow.com/a/34781198
            height: inherit;
            vertical-align: middle;
        }

        &_with-fixed-width {
            white-space: normal;
            word-break: break-word;
        }

        &_sortable:hover {
            cursor: pointer;
        }

        &_selectable.data-table__td:hover {
            background: var(--data-table-color-hover-area);
            cursor: pointer;
            // For the hover state, you need to override inline styles
            // (since it is impossible to set classes for individual cells in the current table)
            opacity: 1 !important; // stylelint-disable-line declaration-no-important
        }
    }

    &__cell_type_grid:not(th) {
        padding: 0;
    }

    &__link {
        // link occupies the entire cell
        display: block;
        height: 100%;
    }

    &__content {
        // to prevent background-color affect border-color
        background-clip: padding-box;
        min-width: 100%;
        height: 100%;

        &_number {
            text-align: right;
        }

        &_null {
            font-style: italic;
            opacity: 0.5;
        }

        &_with-fixed-height {
            height: unset;
        }
    }

    &__diff {
        font-size: 0.8em;

        &_pos {
            color: #008000;
        }

        &_neg {
            color: #ff0000;
        }
    }

    &__grid-wrapper {
        display: grid;
        grid-auto-rows: auto;
        grid-auto-columns: auto;

        &_flow_column {
            grid-auto-flow: column;
        }

        &_flow_row {
            grid-auto-flow: row;
        }
    }

    &__grid-wrapper &__content {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 5px;
        box-sizing: border-box;
    }

    &__grid-wrapper:not(&__grid-wrapper_flow_row):not(&__grid-wrapper_flow_column)
        > &__content:not(:last-child) {
        border-bottom: 1px solid var(--data-table-border-color);
    }

    &__grid-wrapper_flow_column > &__grid-wrapper_flow_row:not(:last-child) &__content {
        border-right: 1px solid var(--data-table-border-color);
    }

    &__grid-wrapper_flow_row > &__grid-wrapper_flow_column:not(:last-child) &__content {
        border-bottom: 1px solid var(--data-table-border-color);
    }

    &__cell .table-action-btn:has(.g-button__icon:only-child) {
        height: 16px;
        width: 16px;
        line-height: 16px;

        .g-button__icon {
            height: 16px;
            width: 12px;
        }
    }

    &__sort-icon {
        margin-left: 10px;
        transform: rotate(-90deg);

        &_desc {
            transform: rotate(90deg);
        }
    }

    &__column-hint {
        margin-left: 4px;
    }
}

.chartkit-table .data-table {
    &__table {
        //  small table stretches over the entire available width
        // -1px to prevent horizontal scroll when "No data"
        min-width: calc(100% - 1px);
    }

    &__sort-icon {
        margin-right: 2%;

        &_shadow {
            display: none;
        }
    }

    thead tr {
        height: var(--data-table-row-height);
    }

    &__box_sticky-head_moving thead tr {
        height: 0px;
    }

    &__td {
        // safari(15) cannot apply 100% row height to a cell
        height: auto;
    }

    &__th {
        font-size: var(--dl-table-font-size);
    }
}
