@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-font-size: 14px !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: tint($slate-gray-100, 60%) !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: tint($primary-brand, 75%) !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-container {
    position: relative;
    overflow: auto;
    border: none;
    height: auto;
    animation: FadeIn 0.3s;
    max-height: 100vh;
    border-bottom: 1px solid $slate-gray-200;
}

@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: 600;
    vertical-align: bottom;
}

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

@mixin hc-table-body-row() {
    &: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: top;
}

@mixin hc-table-index-body-cell() {
    background-color: $slate-gray-200;
}

@mixin hc-table-index-cell() {
    padding-right: 12px;
    padding-left: 12px;
    width: 0;
}

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

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

@mixin hc-table-cell-resizer() {
    cursor: col-resize;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 10px;

    &.disabled {
        cursor: default;
    }
}

@mixin hc-table-cell-resizer-left() {
    left: 0;
    margin-left: -1px;
}

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

@mixin hc-table-cell-resizer-right() {
    margin-right: -1px;
    right: 0;
}

@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-cell() {
    border: $table-border;
}

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

@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-small-table-header-sortable() {
    &:after {
        bottom: 7px;
    }
}

@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;
}

@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() {
    &:nth-child(2n):hover {
        background-color: $row-color;
    }

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

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

@mixin hc-table-actions() {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@mixin hc-table-elip-menu() {
    margin: -1px 0 -2px 6px;
}

@mixin hc-action-ico() {
    @include fontSize(15px);
    cursor: pointer;
    color: $gray-600;
    opacity: 0;
    transition: opacity 0.3s;
}

@mixin hc-action-ico-hover() {
    color: $offblack;
}

@mixin hc-action-ico-margin() {
    margin-right: 12px;
}

@mixin hc-action-ico-show() {
    opacity: 1;
}

@mixin hc-table-small-elip-menu() {
    opacity: 1;
}

@mixin hc-table-bulk-actions() {
    padding: 3px 0 3px 20px;
    min-height: 32px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@mixin hc-table-bulk-actions-selected() {
    @include fontSize(13px);
    color: $gray-500;
    font-style: italic;

    &:not(:only-child) {
        margin-right: 12px;
    }
}

@mixin hc-empty-table-block() {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: $gray-500;
    animation: FadeIn 0.3s;
}

@mixin hc-empty-table-block-ico() {
    background-repeat: no-repeat;
    margin-bottom: 7px;
    height: 48px;
    width: 48px;
    opacity: 0.3;
}

@mixin hc-empty-ico() {
    background-image: url($ico-empty);
}
@mixin hc-warn-ico() {
    background-image: url($ico-warning);
}

@mixin hc-empty-table-block-msg() {
    font-style: italic;
    font-weight: 400;
    text-align: center;
}

@mixin hc-empty-table-block-button() {
    margin-top: 10px;
    font-style: normal;
}



// sticky no borders
@mixin th-header-sticky() {
    z-index: 100;
    position: sticky;
    background-color: $white;
    top: -1px !important;
    box-shadow: 1px 0 2px $shadow;
}

@mixin th-header-sticky-gray() {
    background-color: $slate-gray-100;
}

@mixin th-header-sticky-first-child() {
    z-index: 101;

    &:before {
        content: ' ';
        height: 100%;
        width: 2px;
        background-color: $white;
        display: inline-block;
        position: absolute;
        left: -1px;
        top: 0;
    }
}

@mixin th-header-sticky-last-child() {
    &:before {
        content: ' ';
        height: 100%;
        width: 2px;
        background-color: $white;
        display: inline-block;
        position: absolute;
        right: -1px;
        top: 0;
    }
}


@mixin th-header-sticky-first-child-gray() {
    &:before {
        background-color: $slate-gray-100;
    }
}

@mixin th-header-sticky-last-child-gray() {
    &:before {
        background-color: $slate-gray-100;
    }
}

@mixin th-sticky-row-and-col() {
    z-index: 101;
    background-color: $slate-gray-200;
    border-left: 1px solid $slate-gray-300;
}

@mixin th-col-sticky() {
    z-index: 99;
    position: sticky;
    left: -1px !important;
    border-left: 1px solid $slate-gray-300;
    background-color: $slate-gray-200;
    box-shadow: inset 1px 0 0 $slate-gray-300, inset -1px 0 0 $slate-gray-300;

    &:first-child:before {
        content: none;
    }

    &:last-child:after {
        content: none;
    }
}

// sticky w borders
@mixin th-border-header-sticky() {
    background-color: $slate-gray-100;
    box-shadow: inset 0 1px 0 $slate-gray-300, inset 0 -1px 0 $slate-gray-300;
    border: 1px solid $slate-gray-300;
    border-bottom: none;
    &:first-child:before {
        content: none;
    }

    &:last-child:after {
        content: none;
    }
}

@mixin th-sticky-row-and-col-borders() {
    box-shadow: inset 0 1px 0 $slate-gray-300, inset 0 -1px 0 $slate-gray-300,
        inset 1px 0 0 $slate-gray-300, inset -1px 0 0 $slate-gray-300;
}

@mixin th-border-col-sticky() {
    border-right: none !important;
    box-shadow: inset 1px 0 0 $slate-gray-300, inset -1px 0 0 $slate-gray-300;
}