@import '../base/states';
@import './layout';
@import '../mixins/blend-modes';

$grid-header-color: $accent !default;
$grid-color: $normal-text-color !default;
$grid-border-color: rgba(0, 0, 0, .08) !default;
$grid-header-background: $background !default;
$grid-background: $base !default;

$grid-alt-background: $base !default;
$grid-active-color: $accent !default;

$grid-grouping-row-background: darken($normal-background, 7%) !default;

$pager-focused-box-shadow: inset 0 0 0 2px darken($base, 8%) !default;
$pager-selected-focused-box-shadow: inset 0 0 0 2px blend-multiply($accent, darken($background, 8%)) !default;
$pager-hover-background: $hover-background !default;
$pager-selected-background: $selected-background !default;
$pager-selected-color: $selected-text-color !default;
$pager-selected-hover-background: blend-multiply($accent, darken($background, 8%)) !default;

@include exports('grid/theme') {
    .k-grid-header,
    .k-grid-header-wrap,
    .k-grid td,
    .k-grid-footer,
    .k-grid-footer-wrap,
    .k-grid-content-locked,
    .k-grid-footer-locked,
    .k-grid-header-locked,
    .k-grouping-header,
    .k-grouping-header .k-group-indicator {
        border-color: $grid-border-color;
    }

    .k-grid-header,
    .k-grid-footer,
    .k-pager-wrap,
    .k-group-footer,
    .k-grouping-header {
        background-color: $grid-background;
    }

    .k-grid-footer td,
    .k-group-footer td,
    .k-grouping-row td {
        font-weight: bold;
    }

    .k-grid {
        .k-alt {
            background-color: $grid-alt-background;
        }

        tr.k-state-selected {
            background-color: $selected-background;
            color: $selected-text-color;

            .k-hierarchy-cell > .k-icon {
                color: $selected-text-color;
            }
        }

        .k-grouping-row {
            background-color: $grid-grouping-row-background;
        }

        .k-grouping-dropclue {
            &::before {
                border-color: $grid-color transparent transparent;
            }
        }
    }

    /* Pager */
    .k-grid-pager {
        .k-link,
        .k-link:link {
            color: $grid-active-color;
            transition: $transition;

            &:focus {
                box-shadow: $pager-focused-box-shadow;
            }

            &:hover {
                background-color: $pager-hover-background;
            }

            &.k-state-selected {
                color: $pager-selected-color;

                &:focus {
                    box-shadow: $pager-selected-focused-box-shadow;
                }

                &:hover {
                    background-color: $pager-selected-hover-background;
                }
            }

            &.k-state-disabled {
                box-shadow: none;
                background-color: transparent;
            }
        }
    }
}