@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 8px !default;
$cell-padding-condensed: 6px 8px !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: $white !default;
$row-color-footer: $slate-gray-100 !default;
$row-color-hover: $gray-05 !default;
$row-color-action-hover: $gray-05 !default;
$row-color-selected: $azure !default;
$row-color-selected-hover: $gray-05 !default;
$row-selected-font-color: $white;
$row-selected-border-color: $white;

table.hc-table {
    width: 100%;
    max-width: 100%;
    color: $tbody-font-color;
    border: $table-border-transparent;

    td,
    th {
        border-top: none;
        line-height: 1.3;
        padding: $cell-padding;
        position: relative;
        background-clip: padding-box;

        &:first-of-type {
            .hc-cell-resizer-left {
                display: none;
            }
        }

        &:last-of-type {
            .hc-cell-resizer-right {
                display: none;
            }
        }

        &:focus {
            outline: none;
        }
    }

    th {
        font-weight: 500;
    }

    thead th {
        color: $thead-font-color;
        font-size: $thead-font-size;
        vertical-align: bottom;
    }

    thead {
        border-bottom: 2px solid $gray-50;
    }

    tbody {
        font-size: $tbody-font-size;
        border: none;

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

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

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

            &.hc-row-selected {
                background-color: $row-color-selected;
                color: $row-selected-font-color;

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

                td {
                    border-color: $row-selected-border-color;
                }
            }
        }

        td {
            vertical-align: top;
        }
    }

    tfoot {
        font-size: $thead-font-size;
        font-weight: 600;

        td {
            border-bottom: none;
        }
    }

    // Add Borders
    &.hc-table-borders {
        border: $table-border-transparent;

        td,
        th {
            border: none;
        }

        thead th {
            background-color: $row-color-header;
        }

        tr.hc-footer-row {
            background-color: $row-color-footer;
        }
    }

    // Condensed
    &.hc-table-small {
        td,
        th {
            padding: $cell-padding-condensed;
            font-size: $table-condensed-font-size;
        }
    }

    // Actionable table/row
    &.hc-action-table tbody {
        tr:not([disabled]) {
            &:hover {
                background-color: $row-color-action-hover;
                cursor: pointer;
            }

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

    tr.hc-action-row:not([disabled]) {
        &:hover {
            background-color: $row-color-action-hover;
            cursor: pointer;
        }

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

    // Column text justify options
    th.hc-table-justify-left,
    td.hc-table-justify-left {
        text-align: left;

        .hc-sort-header-container {
            justify-content: left;
        }
    }

    th.hc-table-justify-right,
    td.hc-table-justify-right {
        text-align: right;

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

    th.hc-table-justify-center,
    td.hc-table-justify-center {
        text-align: center;

        .hc-sort-header-container {
            justify-content: center;
        }
    }

    // Sorting
    th.hc-col-sortable,
    th.hc-col-sortable-left {
        background-clip: padding-box;
        position: relative;
        cursor: pointer;
        padding-right: 35px;

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

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

        &.hc-active-sort {
            color: $thead-active-font-color;

            &.hc-sort-asc {
                &:after {
                    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzYwLjc4IDE3OTIiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDBhODU5O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzA0Ljc4LDE0NDBxMCwxMi0xMCwyNGwtMzE5LDMxOWEzMy4zNiwzMy4zNiwwLDAsMS0yMyw5cS0xMiwwLTIzLTlsLTMyMC0zMjBxLTE1LTE2LTctMzUsOC0yMCwzMC0yMGgxOTJWMzJxMC0xNCw5LTIzdDIzLTloMTkycTE0LDAsMjMsOXQ5LDIzVjE0MDhoMTkycTE0LDAsMjMsOVQ3MDQuNzgsMTQ0MFptMTA1NiwxMjh2MTkycTAsMTQtOSwyM3QtMjMsOWgtODMycS0xNCwwLTIzLTl0LTktMjNWMTU2OHEwLTE0LDktMjN0MjMtOWg4MzJxMTQsMCwyMyw5VDE3NjAuNzgsMTU2OFptLTE5Mi01MTJ2MTkycTAsMTQtOSwyM3QtMjMsOWgtNjQwcS0xNCwwLTIzLTl0LTktMjNWMTA1NnEwLTE0LDktMjN0MjMtOWg2NDBxMTQsMCwyMyw5VDE1NjguNzgsMTA1NlptLTE5Mi01MTJWNzM2cTAsMTQtOSwyM3QtMjMsOWgtNDQ4cS0xNCwwLTIzLTl0LTktMjNWNTQ0cTAtMTQsOS0yM3QyMy05aDQ0OHExNCwwLDIzLDlUMTM3Ni43OCw1NDRabS0xOTItNTEyVjIyNHEwLDE0LTksMjN0LTIzLDloLTI1NnEtMTQsMC0yMy05dC05LTIzVjMycTAtMTQsOS0yM3QyMy05aDI1NnExNCwwLDIzLDlUMTE4NC43OCwzMloiLz48L3N2Zz4=');
                }
            }

            &.hc-sort-desc {
                &:after {
                    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNzYwLjc4IDE3OTIiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMDBhODU5O308L3N0eWxlPjwvZGVmcz48dGl0bGU+QXJ0Ym9hcmQgMTwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTE4NC43OCwxNTY4djE5MnEwLDE0LTksMjN0LTIzLDloLTI1NnEtMTQsMC0yMy05dC05LTIzVjE1NjhxMC0xNCw5LTIzdDIzLTloMjU2cTE0LDAsMjMsOVQxMTg0Ljc4LDE1NjhabS00ODAtMTI4cTAsMTItMTAsMjRsLTMxOSwzMTlhMzMuMzYsMzMuMzYsMCwwLDEtMjMsOXEtMTIsMC0yMy05bC0zMjAtMzIwcS0xNS0xNi03LTM1LDgtMjAsMzAtMjBoMTkyVjMycTAtMTQsOS0yM3QyMy05aDE5MnExNCwwLDIzLDl0OSwyM1YxNDA4aDE5MnExNCwwLDIzLDlUNzA0Ljc4LDE0NDBabTY3Mi0zODR2MTkycTAsMTQtOSwyM3QtMjMsOWgtNDQ4cS0xNCwwLTIzLTl0LTktMjNWMTA1NnEwLTE0LDktMjN0MjMtOWg0NDhxMTQsMCwyMyw5VDEzNzYuNzgsMTA1NlptMTkyLTUxMlY3MzZxMCwxNC05LDIzdC0yMyw5aC02NDBxLTE0LDAtMjMtOXQtOS0yM1Y1NDRxMC0xNCw5LTIzdDIzLTloNjQwcTE0LDAsMjMsOVQxNTY4Ljc4LDU0NFptMTkyLTUxMlYyMjRxMCwxNC05LDIzdC0yMyw5aC04MzJxLTE0LDAtMjMtOXQtOS0yM1YzMnEwLTE0LDktMjN0MjMtOWg4MzJxMTQsMCwyMyw5VDE3NjAuNzgsMzJaIi8+PC9zdmc+');
                }
            }
        }
    }

    // align sort icons on left of the col header
    th.hc-col-sortable-left {
        padding-right: 16px;
        padding-left: 35px;

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

    &.hc-no-hover-table {
        tbody tr {
            &.hc-row-selected:hover {
                background-color: $row-color-selected !important;
            }
        }
    }
}