@import './colors';
@import './mixins';

$table-border: 1px solid $slate-gray-300 !default;
$table-border-transparent: 1px solid transparent;
$table-condensed-font-size: 13px;
$header-border-thick: 1px solid $slate-gray-300 !default;
$cell-padding: 8px 16px !default;
$cell-padding-condensed: 6px 16px !default;
$thead-bordered-font-size: 14px !default;
$thead-font-size: 16px !default;
$thead-font-color: $dark-blue !default;
$thead-active-font-color: $green !default;
$tbody-font-size: 15px !default;
$tbody-font-color: $text !default;
$row-color: $white !default;
$row-color-alt: $gray-02 !default;
$row-color-header: $slate-gray-100 !default;
$row-color-footer: $slate-gray-100 !default;
$row-color-hover: shade($slate-gray-100, 5%) !default;
$row-color-action-hover: $gray-05 !default;
$row-color-selected: $azure !default;
$row-color-selected-hover: tint($azure, 20%) !default;
$row-selected-font-color: $white;
$row-selected-border-color: $white;

@mixin hc-table-element() {
    display: block;
}

@mixin hc-table() {
    border: $table-border-transparent;
    color: $tbody-font-color;
    max-width: 100%;
    width: 100%;
}

@mixin hc-table-cell() {
    background-clip: padding-box;
    border-bottom: $table-border;
    border-top: none;
    line-height: 1.3;
    padding: $cell-padding;
    position: relative;

    &:focus {
        outline: none;
    }
}

@mixin hc-table-header-cell() {
    color: $thead-font-color;
    font-size: $thead-font-size;
    font-weight: 400;
    vertical-align: bottom;
}

@mixin hc-table-header() {
    border-bottom: 2px solid $gray-50;
}

@mixin hc-table-body() {
    border: none;
    font-size: $tbody-font-size;
}

@mixin hc-table-body-row() {
    height: 48px;
    
    &:nth-child(2n) {
        background-color: $row-color;
    }

    &:nth-child(2n + 1) {
        background-color: $row-color-alt;
    }

    &:not([disabled]):hover {
        background-color: $row-color-hover;
    }
}

@mixin hc-table-body-cell() {
    vertical-align: middle;
    border-bottom: none !important;
}

@mixin hc-table-footer() {
    font-size: $tbody-font-size;
    font-weight: 600;
}

@mixin hc-table-footer-cell() {
    border-bottom: none;
}

@mixin hc-table-cell-resizer-left-first-cell() {
    display: none;
}

@mixin hc-table-cell-resizer-right-last-cell() {
    display: none;
}

@mixin hc-table-row-selected() {
    background-color: $row-color-selected;
    color: $row-selected-font-color;

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

@mixin hc-table-row-selected-cell() {
    border-color: $row-selected-border-color;
}

@mixin hc-bordered-table() {
    border: $table-border-transparent;
}

@mixin hc-bordered-table-header {
    border: $table-border;
}

@mixin hc-bordered-table-cell() {
    border: $table-border;
}

@mixin hc-bordered-table-header-cell() {
    background-color: $row-color-header;
    font-weight: 600;
    font-size: $thead-bordered-font-size;
}

@mixin hc-bordered-table-footer() {
    font-size: $thead-bordered-font-size;
    font-weight: 600;
    border-bottom: $table-border;
}

@mixin hc-bordered-table-footer-row() {
    background-color: $row-color-footer;
}

@mixin hc-bordered-table-footer-cell() {
    border: $table-border;
}

@mixin hc-small-table-cell() {
    font-size: $table-condensed-font-size;
    padding: $cell-padding-condensed;
}

@mixin hc-action-table-row() {
    &:hover {
        background-color: $row-color-action-hover;
        cursor: pointer;
    }
}

@mixin hc-action-table-row-selected() {
    &:hover {
        background-color: $row-color-selected-hover;
    }
}

@mixin hc-action-table-action-row() {
    &:hover {
        background-color: $row-color-action-hover;
        cursor: pointer;
    }
}

@mixin hc-action-table-action-row-selected() {
    &:hover {
        background-color: $row-color-selected-hover;
    }
}

@mixin hc-table-cell-justify-left() {
    text-align: left;
}

@mixin hc-table-sort-header-left() {
    justify-content: left;
}

@mixin hc-table-cell-justify-center() {
    text-align: center;
}

@mixin hc-table-sort-header-center() {
    justify-content: center;
}

@mixin hc-table-cell-justify-right() {
    text-align: right;
}

@mixin hc-table-sort-header-right() {
    justify-content: right;

    .hc-sort-header-button {
        text-align: right;
    }
}

@mixin hc-table-header-sortable() {
    background-clip: padding-box;
    cursor: pointer;
    padding-right: 35px;
    position: relative;

    &:hover {
        background-color: $row-color-action-hover;
    }

    &:after {
        background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzYwLjc4IDE3OTIiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojYTNhNWE3O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTgyLDEzNDIuODlIODA1Ljc5cTMxLjM0LDAsMzcuMzEsMTYuNDJ0LTE0LjkxLDM3LjNMNDg1LDE3NjkuNjNRNDY0LjA3LDE3OTIsNDMyLjc3LDE3OTJ0LTUyLjIxLTIyLjM3bC0zNDMuMjEtMzczcS0yMC45MS0yMC44OC0xNC45MS0zNy4zdDM3LjMtMTYuNDJIMjgzLjU2VjBINTgyWm03OTguMjYtMTMxOSwzNDMuMiwzNzEuNTVxMjAuODUsMjAuOTEsMTQuOTIsMzYuNTV0LTM3LjMxLDE1LjY2SDE0NzcuMjRWMTc5MC41MkgxMTc4LjgyVjQ0Ny42M0g5NTVxLTMxLjMyLDAtMzcuMy0xNS42NnQxNC45MS0zNi41NWwzNDMuMi0zNzEuNTVRMTI5Ni42NiwxLjUsMTMyOCwxLjQ4VDEzODAuMjQsMjMuODdaIi8+PC9zdmc+');
        background-position: center center;
        background-repeat: no-repeat;
        bottom: 10px;
        content: '';
        height: 13px;
        margin-left: 15px;
        padding-right: 35px;
        position: absolute;
        right: 1px;
        width: 13px;
    }
}

@mixin hc-table-header-sortable-left() {
    padding-right: 16px;
    padding-left: 35px;

    &:after {
        left: -14px;
    }
}

@mixin hc-table-header-active-sort() {
    color: $thead-active-font-color;
}

@mixin hc-table-header-active-sort-asc() {
    &:after {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNzYwLjggMTc5MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc2MC44IDE3OTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDBBODU5O30KPC9zdHlsZT4KPHRpdGxlPkFydGJvYXJkIDE8L3RpdGxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwzNTJjMC04LDMuMy0xNiwxMC0yNEwzMjksOWM2LjItNS44LDE0LjUtOS4xLDIzLTljOCwwLDE1LjcsMywyMyw5bDMyMCwzMjBjMTAsMTAuNywxMi4zLDIyLjMsNywzNQoJYy01LjMsMTMuMy0xNS4zLDIwLTMwLDIwSDQ4MHYxMzc2YzAsOS4zLTMsMTctOSwyM3MtMTMuNyw5LTIzLDlIMjU2Yy05LjMsMC0xNy0zLTIzLTlzLTktMTMuNy05LTIzVjM4NEgzMmMtOS4zLDAtMTctMy0yMy05CglTMCwzNjEuMywwLDM1MnogTTE3NjAuOCwxNTY4djE5MmMwLDkuMy0zLDE3LTksMjNjLTYsNi0xMy43LDktMjMsOWgtODMyYy05LjMsMC0xNy0zLTIzLTlzLTktMTMuNy05LTIzdi0xOTJjMC05LjMsMy0xNyw5LTIzCglzMTMuNy05LDIzLTloODMyYzkuMywwLDE3LDMsMjMsOUMxNzU3LjgsMTU1MSwxNzYwLjgsMTU1OC43LDE3NjAuOCwxNTY4eiBNMTU2OC44LDEwNTZ2MTkyYzAsOS4zLTMsMTctOSwyM2MtNiw2LTEzLjcsOS0yMyw5aC02NDAKCWMtOS4zLDAtMTctMy0yMy05cy05LTEzLjctOS0yM3YtMTkyYzAtOS4zLDMtMTcsOS0yM3MxMy43LTksMjMtOWg2NDBjOS4zLDAsMTcsMywyMyw5QzE1NjUuOCwxMDM5LDE1NjguOCwxMDQ2LjcsMTU2OC44LDEwNTZ6CgkgTTEzNzYuOCw1NDR2MTkyYzAsOS4zLTMsMTctOSwyM2MtNiw2LTEzLjcsOS0yMyw5aC00NDhjLTkuMywwLTE3LTMtMjMtOXMtOS0xMy43LTktMjNWNTQ0YzAtOS4zLDMtMTcsOS0yM3MxMy43LTksMjMtOWg0NDgKCWM5LjMsMCwxNywzLDIzLDlDMTM3My44LDUyNywxMzc2LjgsNTM0LjcsMTM3Ni44LDU0NHogTTExODQuOCwzMnYxOTJjMCw5LjMtMywxNy05LDIzcy0xMy43LDktMjMsOWgtMjU2Yy05LjMsMC0xNy0zLTIzLTkKCXMtOS0xMy43LTktMjNWMzJjMC05LjMsMy0xNyw5LTIzczEzLjctOSwyMy05aDI1NmM5LjMsMCwxNywzLDIzLDlTMTE4NC44LDIyLjcsMTE4NC44LDMyeiIvPgo8L3N2Zz4K');
    }
}

@mixin hc-table-header-active-sort-desc() {
    &:after {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNzYwLjggMTc5MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTc2MC44IDE3OTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDBBODU5O30KPC9zdHlsZT4KPHRpdGxlPkFydGJvYXJkIDE8L3RpdGxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTE4NC44LDE1Njh2MTkyYzAsOS4zLTMsMTctOSwyM3MtMTMuNyw5LTIzLDloLTI1NmMtOS4zLDAtMTctMy0yMy05cy05LTEzLjctOS0yM3YtMTkyYzAtOS4zLDMtMTcsOS0yMwoJczEzLjctOSwyMy05aDI1NmM5LjMsMCwxNywzLDIzLDlTMTE4NC44LDE1NTguNywxMTg0LjgsMTU2OHogTTcwNC44LDE0NDBjMCw4LTMuMywxNi0xMCwyNGwtMzE5LDMxOWMtNi4yLDUuOC0xNC41LDkuMS0yMyw5CgljLTgsMC0xNS43LTMtMjMtOWwtMzIwLTMyMGMtMTAtMTAuNy0xMi4zLTIyLjMtNy0zNWM1LjMtMTMuMywxNS4zLTIwLDMwLTIwaDE5MlYzMmMwLTkuMywzLTE3LDktMjNzMTMuNy05LDIzLTloMTkyCgljOS4zLDAsMTcsMywyMyw5czksMTMuNyw5LDIzdjEzNzZoMTkyYzkuMywwLDE3LDMsMjMsOVM3MDQuOCwxNDMwLjcsNzA0LjgsMTQ0MHogTTEzNzYuOCwxMDU2djE5MmMwLDkuMy0zLDE3LTksMjNzLTEzLjcsOS0yMyw5CgloLTQ0OGMtOS4zLDAtMTctMy0yMy05cy05LTEzLjctOS0yM3YtMTkyYzAtOS4zLDMtMTcsOS0yM3MxMy43LTksMjMtOWg0NDhjOS4zLDAsMTcsMywyMyw5UzEzNzYuOCwxMDQ2LjcsMTM3Ni44LDEwNTZ6IE0xNTY4LjgsNTQ0Cgl2MTkyYzAsOS4zLTMsMTctOSwyM3MtMTMuNyw5LTIzLDloLTY0MGMtOS4zLDAtMTctMy0yMy05cy05LTEzLjctOS0yM1Y1NDRjMC05LjMsMy0xNyw5LTIzczEzLjctOSwyMy05aDY0MGM5LjMsMCwxNywzLDIzLDkKCVMxNTY4LjgsNTM0LjcsMTU2OC44LDU0NHogTTE3NjAuOCwzMnYxOTJjMCw5LjMtMywxNy05LDIzcy0xMy43LDktMjMsOWgtODMyYy05LjMsMC0xNy0zLTIzLTlzLTktMTMuNy05LTIzVjMyYzAtOS4zLDMtMTcsOS0yMwoJczEzLjctOSwyMy05aDgzMmM5LjMsMCwxNywzLDIzLDlTMTc2MC44LDIyLjcsMTc2MC44LDMyeiIvPgo8L3N2Zz4K');
    }
}

@mixin hc-no-hover-table-row-selected() {
    &:hover {
        background-color: $row-color-selected !important;
    }
}