/* 
    kitt theme for the quick grid component
*/

/* .quickgrid[theme=default],
.quickgrid[theme=default] *:not(i, td > button, td > .button) {
    all: revert;
} */


.quickgrid[theme=default] {
    width: 100%;
}

/* 
    header cells
*/

.quickgrid[theme=default] thead tr {
    background: var(--nav-background);
    border-bottom: solid 3px var(--red);
    color: white;
}

.quickgrid[theme=default] th:not(:has(button)) {
    padding: 5px 10px;
}

.quickgrid[theme=default] th:first-of-type .col-header-content {
    padding-right: 0;
}

.quickgrid[theme=default] th button {
    color: inherit;
    font-weight: bolder;
    padding: 5px;
    white-space: nowrap;
    background: transparent;
    border-color: transparent;


    &:is(button:hover) {
        background: var(--nav-background-lighter);
    }
}

/* 
This replaces the default sorting indicator the quick grid ships with
*/

.quickgrid[theme=default] .sort-indicator {
    margin-left: 10px;
    width: 8px;
    height: 8px;
    border: solid transparent 3px;
    border-left: transparent;
    border-top: transparent;
    rotate: -135deg;
    background: none !important;
}

.quickgrid[theme=default] :is(.col-sort-asc, .col-sort-desc) .sort-indicator {
    border-color: white;
}

.quickgrid[theme=default] .col-sort-asc .sort-indicator {
    rotate: 135deg;
    margin-bottom: 5px;
}

/* 
    data cells
*/

.quickgrid[theme=default] > tbody > tr > td {
    padding: 5px !important; 
    white-space: nowrap;
}

.quickgrid tr {

    background: white;


    &:nth-child(even) {
        background: rgb(238, 238, 238);
    }
    &:hover {
        background: rgb(214, 214, 214);
    }

}