@use '@koobiq/components/core/styles/common/tokens';
@use 'ag-grid-community/styles' as ag;

@mixin core() {
    // Sizing
    $grid-size: 4px;
    $icon-size: 16px;
    $header-height: 40px; // дополнительно проставляется через gridOptions
    $row-height: 40px; // дополнительно проставляется через gridOptions
    $cell-horizontal-padding: $grid-size * 3;
    $list-item-height: $grid-size * 9;
    $header-icon-size: 16px;
    $cell-horizontal-border: solid transparent;

    $column-select-indent-size: $grid-size + $icon-size;
    $row-group-indent-size: $grid-size * 3 + $icon-size;

    // Colors
    $background-color: transparent;
    $hover-background: var(--kbq-states-background-transparent-hover);
    $selected-row-background-color: var(--kbq-states-background-theme-less-active);
    $selected-row-hover-background-color: var(--kbq-states-background-theme-less-hover);
    $icon-color: var(--kbq-icon-contrast-fade);

    $row-hover-color: $hover-background;
    $border-color: transparent;
    $header-border-color: var(--kbq-line-contrast-less);

    $card-shadow:
        0 3px 1px -2px rgb(0 0 0 / 20%),
        0 2px 2px 0 rgb(0 0 0 / 14%),
        0 1px 5px 0 rgb(0 0 0 / 12%);

    @include ag.grid-styles(
        (
            theme: koobiq,
            grid-size: $grid-size,
            icon-size: $icon-size,
            row-height: $row-height,
            header-height: $header-height,
            cell-horizontal-padding: $cell-horizontal-padding,
            row-group-indent-size: $row-group-indent-size,
            background-color: $background-color,
            odd-row-background-color: $background-color,
            border-color: $border-color,
            cell-horizontal-border: $cell-horizontal-border,
            card-shadow: $card-shadow,
            list-item-height: $list-item-height,
            column-select-indent-size: $column-select-indent-size,
            selected-row-background-color: $selected-row-background-color,
            row-hover-color: $row-hover-color,
            header-foreground-color: var(--kbq-foreground-contrast-secondary),
            header-background-color: $background-color,
            header-column-separator-display: block,
            header-column-separator-width: 1px,
            header-column-separator-color: var(--kbq-line-contrast-less),
            header-column-separator-height: 66%
        )
    );

    .ag-theme-koobiq {
        @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

        .ag-root-wrapper {
            border: none;
        }

        .ag-header {
            border-bottom: 1px solid $header-border-color;
        }

        .ag-header-viewport {
            &.ag-grid-with-columns-menu {
                padding-right: 40px;
            }
        }

        .ag-header-container {
            @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

            color: var(--kbq-foreground-contrast-secondary);
        }

        .ag-header-row {
            color: var(--kbq-foreground-contrast-secondary);
            font-weight: normal !important;

            &:hover {
                .ag-header-cell::after {
                    display: block;
                }
            }
        }

        .ag-header-cell {
            padding: 0 8px;

            &::after {
                display: none;
            }

            .sort-available {
                display: flex;
            }
        }

        .ag-keyboard-focus .ag-header-row .ag-header-cell:focus::after {
            background: transparent;
        }

        .ag-header-cell-menu-button .ag-icon-menu {
            display: flex;
        }

        .ag-header-cell-sortable:hover {
            color: var(--kbq-foreground-contrast);

            .ag-header-icon {
                color: var(--kbq-icon-contrast);
            }
        }

        .ag-center-cols-container {
            min-width: 100% !important;
        }

        .ag-row.ag-row-selected {
            &:hover::before {
                background: $selected-row-hover-background-color;
            }
        }

        .ag-cell,
        ag-template-cell {
            line-height: normal;
            border: none !important;
            outline: none;
            -webkit-font-smoothing: antialiased;

            > span {
                overflow: hidden;
                line-height: normal;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .ag-cell {
            padding: 10px 8px;
        }

        .ag-has-focus {
            .ag-row-focus {
                border: none !important;
            }
        }

        .ag-row {
            @include tokens.kbq-typography-level-to-styles_css-variables(typography, text-normal);

            color: var(--kbq-foreground-contrast);
            border: none !important;
        }

        .ag-ltr .ag-has-focus .ag-cell-focus,
        .ag-rtl .ag-has-focus .ag-cell-focus {
            border: 0 !important;
            outline: none !important;
        }

        // context menu spacing
        .ag-menu-option {
            height: $grid-size * 7;
            line-height: $grid-size * 7;
        }

        .ag-column-select {
            .ag-column-select-column-group,
            .ag-column-select-column {
                height: $grid-size * 5;
                line-height: $grid-size * 5;
            }
        }

        .ag-icon,
        .ag-header-icon {
            color: $icon-color;
        }

        .ag-sort-ascending-icon,
        .ag-sort-descending-icon {
            margin-left: var(--kbq-size-s);
        }
    }
}