@import '../base/layout';
@import '../icons/main';
@import '../dialog/main';

$group-indicator-padding: 6px !default;

@include exports('grid/layout') {
    .k-grid {
        display: block;
        position: relative;
        border-width: 1px;
        border-style: solid;
    }

    .k-grid table {
        width: 100%;
        margin: 0; /* override CSS libraries */
        max-width: none;
        border-collapse: separate;
        border-spacing: 0;
        empty-cells: show;
        border-width: 0;
        outline: none;
    }

    .k-grid-toolbar,
    .k-grouping-header {
        display: block;
        padding: 1em;
        border-width: 0 0 1px;
        border-style: solid;
    }

    .k-grid-header {
        border-bottom-style: solid;
        border-bottom-width: 1px;

        th>.k-link>.k-icon {
            vertical-align: text-bottom;
        }
    }

    .k-grid-footer {
        border-width: 1px 0 0;
        border-style: solid;
    }

    .k-grid-content table,
    .k-grid-content-locked>table,
    .k-grid-footer table,
    .k-grid-header table {
        table-layout: fixed;
    }

    .k-grid-virtual {
        .k-grid-content {
            > table {
                position: absolute;
                z-index: 1;
            }

            > .k-height-container {
                position: relative;
            }
        }
    }

    .k-header.k-drag-clue {
        overflow: hidden;

        padding: .22em 1em .1em;
        line-height: 1.5em;
        border-radius: $border-radius;
    }

    .k-grid-header th.k-header,
    .k-filter-row th {
        overflow: hidden;
        border-style: solid;
        border-width: 0 0 0 1px;
        padding: 1em;
        font-weight: normal;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        line-height: 1.286em;
    }

    .k-grid-header th.k-header>.k-link {
        display: block;
        line-height: 1.286em;
        padding: 1em;
        margin: -1em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .k-grid-content {
        position: relative;
        overflow: auto;
        overflow-x: auto;
        overflow-y: scroll;
        min-height: 0%; /* IE9 bug workaround - expanding Grid on hover */
    }

    .k-grid td {
        border-style: solid;
        border-width: 0 0 0 1px;
        padding: .5em 1em;
        overflow: hidden;
        line-height: 1.6em;
        vertical-align: middle;
        text-overflow: ellipsis;
    }

    .k-grid tbody td:first-child,
    .k-grid tfoot td:first-child,
    .k-grid-header th.k-header:first-child {
        border-left-width: 0;
    }

    .k-grid-content tr:last-child td {
        border-bottom-width: 0;
    }

    .k-grid-footer-wrap,
    .k-grid-header-wrap {
        position: relative;
        width: 100%;
        overflow: hidden;
        border-style: solid;
        border-width: 0 1px 0 0;
        box-sizing: content-box;
    }

    .k-grid .k-group-col,
    .k-grid .k-hierarchy-col {
        width: 30px;
    }

    td.k-hierarchy-cell {
        text-align: center;
        padding: 0;

        > .k-icon {
            width: 100%;
            display: inline-block;
            padding: .5em 0;
            line-height: 1.6em;
            outline: 0;
        }
    }

    /* Locked columns */
    .k-grid-content-locked,
    .k-grid-footer-locked,
    .k-grid-header-locked {
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        position: relative;
        border-style: solid;
        border-width: 0 1px 0 0;
    }

    .k-grid-content-locked+.k-grid-content,
    .k-grid-footer-locked+.k-grid-footer-wrap,
    .k-grid-header-locked+.k-grid-header-wrap {
        display: inline-block;
        vertical-align: top;
    }

    /* Grid grouping */
    .k-grid .k-grouping-row td,
    .k-grid .k-hierarchy-cell {
        overflow: visible;
    }

    .k-grid-edit-row td {
        text-overflow: clip;
    }

    .k-grouping-header+.k-grid-toolbar {
        border-width: 0 0 1px;
    }

    .k-group-footer td {
        border-style: solid;
        border-width: 1px 0;
    }

    .k-group-footer .k-group-cell + td {
        border-left-width: 1px;
    }

    .k-grouping-row .k-icon {
        margin: -3px 4px 0 2px;
    }

    .k-grouping-row p {
        display: inline-block;
        vertical-align: middle;
        margin-left: -.6em;
        padding: 0 .6em;
    }

    .k-grouping-row + tr td {
        border-top-width: 1px;
    }

    .k-grouping-row .k-group-cell,
    .k-grouping-row+tr .k-group-cell {
        text-overflow: none;
    }

    .k-grid .k-hierarchy-cell+td {
        border-left-width: 0;
    }

    .k-grid .k-group-col,
    .k-grid .k-hierarchy-col {
        width: 27px;
    }

    .k-grouping-header {
        line-height: 2;
        padding: 8px 6px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .k-grouping-dropclue {
        position: absolute;
        width: 12px;
        height: 30px;

        &::before {
            display: inline-block;
            content: ' ';
            width: 12px;
            height: 12px;
            border-width: 6px;
            border-style: solid;
            box-sizing: border-box;
        }
    }

    .k-grouping-header .k-group-indicator {
        display: inline-block;
        border-style: solid;
        border-width: 1px;
        border-radius: $border-radius;
        margin: 0 0 0 16px;
        padding: $group-indicator-padding ($group-indicator-padding * 3);
        line-height: 1em;
    }

    .k-grouping-header .k-link {
        display: inline-block;
        border-width: 0;
        padding: 0;
        text-decoration: none;
    }

    .k-grouping-header .k-button {
        border: 0;
        padding: 0;
        background: transparent;
        line-height: 1;
        vertical-align: middle;
    }

    .k-grouping-header .k-link .k-icon {
        margin: 0 0 0 -3px;
        vertical-align: middle;
    }

    .k-grouping-header .k-button .k-icon {
        margin: 0 0 0 3px;
    }

    .k-grouping-header a,
    .k-grouping-header .k-button {
        display: inline-block;
        vertical-align: middle;
    }

    /* Pager */
    .k-grid .k-pager-numbers,
    .k-pager-numbers .k-link,
    .k-pager-numbers .k-state-selected {
        display: inline-block;
        vertical-align: top;
    }

    .k-pager-wrap {
        display: block;
        clear: both;
        overflow: hidden;
        position: relative;
        border-style: solid;
        border-width: 1px 0 0;
        line-height: 2.143em;
        padding: .571em;
        border-radius: 0;
    }

    .k-pager-numbers .k-current-page {
        display: none;
    }

    .k-pager-numbers li,
    .k-pager-input {
        float: left;
    }

    .k-grid .k-pager-numbers {
        float: left;
        cursor: default;
    }

    .k-pager-info {
        float: right;
    }

    .k-pager-numbers .k-link {
        text-decoration: none;
    }

    .k-pager-wrap > .k-link,
    .k-pager-numbers .k-link,
    .k-pager-numbers .k-state-selected {
        min-width: 2.143em;
    }

    .k-pager-wrap>.k-link {
        float: left;
        height: 2.143em;/*IE7*/
        line-height: 2.143em;/*IE7*/
        cursor: pointer;
        text-align: center;
    }

    .k-pager-wrap>a.k-state-disabled:hover {
        background: none;
        cursor: default;
    }

    .k-pager-numbers .k-link {
        text-align: center;
        line-height: 2.143em;
    }

    .k-pager-wrap .k-pager-refresh {
        float: right;
        margin-right: .5em;
        border-width: 0;
        border-radius: 0;
    }

    .k-pager-numbers .k-state-selected {
        text-align: center;
    }

    .k-pager-wrap .k-textbox {
        width: 3.333em;
        height: 2.143em;
        padding: 0;
        text-indent: .5em;
    }

    .k-pager-wrap .k-dropdown {
        width: 4.5em;
    }

    .k-pager-refresh {
        float: right;
    }

    .k-pager-input,
    .k-pager-sizes {
        padding: 0 1.4166em;
    }

    .k-pager-sizes {
        display: inline-block;
    }

    .k-pager-sizes .k-widget.k-dropdown {
        margin-top: -2px;
    }

    .k-pager-wrap .k-textbox,
    .k-pager-wrap .k-widget {
        margin: 0 .4em;
    }
}