@import "../_colors";
@import "../_queries";

$table-expanded-row-color: #f5f5f5 !default;
$table-selected-color: #f0f0f0 !default;
$table-hover-color: #ebebeb !default;
$table-border-color: $default-secondary-color !default;
$table-shadow-color: $default-primary-color !default;
$table-text-color: $primary-dark-text-color !default;
$table-expand-icon-color: $primary-dark-text-color !default;
$table-collapse-icon-color: $primary-dark-text-color !default;
$table-sort-icon-color: $default-primary-color !default;
$table-sort-icon-active-color: $primary-dark-text-color !default;

body .ui-table .ui-table-tfoot > tr > td,
body .ui-table .ui-table-tbody > tr > td,
body .ui-table .ui-table-thead > tr > th {
    overflow: hidden;
    padding: 15px;
    word-wrap: break-word;
    color: $table-text-color;
    border-bottom: 1px solid $table-border-color;
    background-color: transparent;
    text-align: left;
    position: relative;
}

body .ui-table .ui-table-thead > tr > th:not(:last-child) {
    border-right: 1px solid $table-border-color;
}

body .ui-table .ui-table-tbody > tr.ui-state-highlight {
    background-color: transparent;
}

body .ui-table .ui-table-tbody > tr.ui-state-highlight > td {
    background-color: $table-selected-color;
}

body .ui-table .ui-table-tbody > tr:focus,
body .ui-table .ui-table-thead > tr > th:focus {
    outline: none;
}

body .ui-table .ui-table-tbody > tr:focus > td,
body .ui-table .ui-table-tbody > tr:hover > td,
body .ui-table .ui-table-thead > tr > th:focus {
    background-color: $table-hover-color;
}

body .ui-table .ui-table-thead > tr > th .ui-sortable-column-icon {
    color: $table-sort-icon-active-color;
}

body .ui-table .ui-table-thead > tr > th:not(.ui-state-highlight) .ui-sortable-column-icon {
    color: $table-sort-icon-color;
}

body .ui-table .ui-widget-header {
    border: none;
}

body .ui-table .ui-table-caption,
body .ui-table .ui-table-summary {
    padding: 10px 0;
    font-weight: normal;
}

@media #{$sm-devices} {
    body .ui-table.ui-table-responsive tbody.ui-table-tbody > tr > td {
        border-bottom-width: 0;
        border-top-width: 0;
        font-weight: bold;

        &:last-of-type {
            border-bottom-width: 1px;
        }
    }

    body .ui-table.ui-table-responsive tbody.ui-table-tbody > tr > td .ui-column-title {
        font-weight: normal;
        display: block;
    }

    body .ui-table.ui-table-responsive tbody.ui-table-tbody > tr:first-of-type > td:first-of-type {
        border-top: 1px solid $default-primary-color;
    }

    body .ui-table.ui-table-responsive tbody.ui-table-tbody > tr > td p-celleditor > * {
        margin-top: 10px;
    }
}

body .ui-table p-tableheadercheckbox:only-child .ui-chkbox,
body .ui-table p-tablecheckbox:only-child .ui-chkbox {
    display: block;
}

body .ui-table p-sorticon {
    vertical-align: baseline;
}

body .ui-table .ui-table-frozen-view {
    box-shadow: 5px 0 5px -5px $table-shadow-color;
    border-right: 1px solid $table-border-color;
    z-index: 0;
    position: relative;
}

body .ui-table tbody > tr.sds-expanded-row {
    box-shadow: inset 0px 5px 5px -3px $table-shadow-color;
}

body .ui-table tbody > tr.sds-expanded-row > td,
body .ui-table tbody > tr.sds-expanded-row:hover > td {
    background-color: $table-expanded-row-color;
}

body .ui-table tbody td .fa.fa-plus,
body .ui-table tbody td .fa.fa-minus {
    cursor: pointer;
    width: 100%;
    text-align: center;
}

body .ui-table tbody .fa.fa-plus {
    color: $table-expand-icon-color;
}

body .ui-table tbody td .fa.fa-plus.disabled {
    color: $default-primary-color;
    cursor: default;
}

body .ui-table tbody td .fa.fa-minus.disabled {
    color: $default-primary-color;
    cursor: default;
}

body .ui-table tbody .fa.fa-minus {
    color: $table-collapse-icon-color;
}

body .ui-table tr:hover > td.ui-editable-column:not(.ui-editing-cell) {
    cursor: text;
}

body .sds-table-scrollable .ui-table-scrollable-wrapper > .ui-table-scrollable-view > .ui-table-scrollable-body {
    max-height: 60vh;
}

/* Exclude IE */
@supports not (-ms-high-contrast: none) {
    // @HACK - IE does not calculate the cell size correctly
    body .ui-table tr:hover > td.ui-editable-column:not(.ui-editing-cell)::after {
        border: 1px solid $table-border-color;
        content: "";
        position: absolute;
        top: 7.5px;
        right: 7.5px;
        bottom: 7.5px;
        left: 7.5px;
        border-radius: 4px;
    }
}

/* Only Firefox */
// @HACK - Without this, Firefox sometimes shows a gray border on cells of tables with editable columns
@-moz-document url-prefix() {
    body .ui-table .ui-table-tfoot > tr > td,
    body .ui-table .ui-table-tbody > tr > td,
    body .ui-table .ui-table-thead > tr > th {
        border-left: 1px solid transparent;
    }
}

body .ui-table .ui-table-tbody > tr > td.ui-editing-cell {
    padding: 7.5px;
}

body .ui-table .ui-table-dragpoint-bottom {
    -webkit-box-shadow: inset 0 -2px 0 0 $primary-color;
    -moz-box-shadow: inset 0 -2px 0 0 $primary-color;
    box-shadow: inset 0 -2px 0 0 $primary-color;
}