@import './table';
@import './icons';

.hc-table-container {
    @include hc-table-container();

    &:has(.cdk-drop-list-dragging) {
        overflow: hidden;
    }
}

.hc-table {
    @include hc-table();

    td,
    th {
        @include hc-table-cell();
    }

    th {
        @include hc-table-header-cell();
    }

    .hc-index-cell {
        @include hc-table-cell-justify-center();
    }

    th.hc-index-cell:not(.hc-sort-header):not(.hc-col-sortable):not(.hc-col-sortable-left) {
        @include hc-table-index-cell();
    }

    tbody {
        @include hc-table-body();
    }

    tbody tr {
        @include hc-table-body-row();
    }

    td:not(.hc-index-cell) {
        @include hc-table-body-cell();
    }

    td.hc-index-cell {
        @include hc-table-index-cell();
        @include hc-table-index-body-cell();
    }

    tfoot {
        @include hc-table-footer();
    }

    tfoot td {
        @include hc-table-footer-cell();
    }
}

.hc-table.hc-table-small {
    td,
    th {
        @include hc-small-table-cell();

        &.hc-col-sortable,
        &.hc-col-sortable-left {
            @include hc-small-table-header-sortable();
        }

        &.hc-index-cell:not(.hc-sort-header):not(.hc-col-sortable):not(.hc-col-sortable-left) {
            @include hc-table-index-cell();
        }
    }
}

.hc-table.hc-action-table {
    tbody tr:not([disabled]) {
        @include hc-action-table-row();

        &.hc-row-selected {
            @include hc-table-row-selected();
        }
    }
}

.hc-cell-resizer-left,
.hc-cell-resizer-right {
    @include hc-table-cell-resizer();
}

.hc-cell-resizer-left {
    @include hc-table-cell-resizer-left();

    .hc-table td:first-of-type &,
    .hc-table th:first-of-type & {
        @include hc-table-cell-resizer-left-first-cell();
    }
}

.hc-cell-resizer-right {
    @include hc-table-cell-resizer-right();

    .hc-table td:last-of-type &,
    .hc-table th:last-of-type & {
        @include hc-table-cell-resizer-right-last-cell();
    }
}

.hc-row-selected,
.hc-table tbody tr.hc-row-selected {
    @include hc-table-row-selected();

    td {
        @include hc-table-row-selected-cell();
    }

    .hc-action-table tbody tr:not([disabled]) & {
        @include hc-action-table-row-selected();
    }

    &.hc-action-row:not([disabled]) {
        @include hc-action-table-action-row-selected();
    }

    .hc-no-hover-table tbody tr & {
        @include hc-no-hover-table-row-selected();
    }
}

.hc-table tbody tr.hc-action-row:not([disabled]) {
    @include hc-action-table-action-row();
}

.hc-table-borders {
    @include hc-bordered-table();

    td,
    th {
        @include hc-bordered-table-cell();
    }

    th {
        @include hc-bordered-table-header-cell();
    }

    .hc-footer-row {
        @include hc-bordered-table-footer-row();
    }

    tfoot td {
        @include hc-bordered-table-footer-cell();
    }
}

.hc-table-justify-left {
    @include hc-table-cell-justify-left();
}

.hc-table-justify-center {
    @include hc-table-cell-justify-center();
}

.hc-table-justify-right {
    @include hc-table-cell-justify-right();
}

.hc-sort-header-container {
    .hc-table-justify-left & {
        @include hc-table-sort-header-left();
    }

    .hc-table-justify-center & {
        @include hc-table-sort-header-center();
    }

    .hc-table-justify-right & {
        @include hc-table-sort-header-right();
    }
}

.hc-table th.hc-col-sortable,
.hc-table th.hc-col-sortable-left {
    @include hc-table-header-sortable();
}

.hc-table th.hc-col-sortable-left {
    @include hc-table-header-sortable-left();
}

.hc-table th.hc-active-sort {
    @include hc-table-header-active-sort();

    &.hc-sort-asc {
        @include hc-table-header-active-sort-asc();
    }

    &.hc-sort-desc {
        @include hc-table-header-active-sort-desc();
    }
}

.hc-no-hover-table {
    tbody tr {
        @include hc-no-hover-table-row();

        &.hc-row-selected {
            @include hc-no-hover-table-row-selected();
        }
    }
}

// Table actions
.hc-table-actions {
    @include hc-table-actions();

    .hc-elip-menu {
        @include hc-table-elip-menu();
    }

    .hc-action-ico {
        @include hc-action-ico();

        &:hover {
            @include hc-action-ico-hover();
        }
    }

    .hc-action-ico:not(:last-of-type) {
        @include hc-action-ico-margin();
    }

    .hc-action-ico-show {
        @include hc-action-ico-show();
    }
}

tr:hover .hc-table-actions .hc-action-ico,
.hc-table-actions-show .hc-action-ico {
    @include hc-action-ico-show();
}

.hc-table-small .hc-table-actions {
    .hc-elip-menu {
        @include hc-table-small-elip-menu();
    }
}

// Table bulk actions
.hc-table-bulk-actions {
    @include hc-table-bulk-actions();
    .selected-count {
        @include hc-table-bulk-actions-selected();
    }
}

// Empty table styles
.hc-empty-table-block {
    @include hc-empty-table-block();

    .hc-empty-table-block-ico {
        @include hc-empty-table-block-ico();
    }

    .hc-empty-ico {
        @include hc-empty-ico();
    }
    .hc-warn-ico {
        @include hc-warn-ico();
    }

    .hc-empty-table-block-msg {
        @include hc-empty-table-block-msg();
    }

    button {
        @include hc-empty-table-block-button();
    }
}


// sticky no borders
th.hc-table-sticky.hc-table-sticky-border-elem-top, .hc-sticky-header th, .hc-sticky-header th.hc-col-sortable-left, .hc-sticky-header th.hc-col-sortable{
    @include th-header-sticky();

    &:first-child {
        @include th-header-sticky-first-child();
    }

    &:last-child {
        @include th-header-sticky-last-child();
    }
}

td, th:first-child {
    &.hc-table-sticky.hc-table-sticky-border-elem-left, &.hc-sticky-col {
        @include th-col-sticky();
     }
}

.hc-table-container-gray {
    th.hc-table-sticky.hc-table-sticky-border-elem-top, .hc-sticky-header th{
        @include th-header-sticky-gray();

        &:first-child {
            @include th-header-sticky-first-child-gray();
        }

        &:last-child {
            @include th-header-sticky-last-child-gray();
        }
    }
}

.hc-table-container-gray, :not(.hc-table-container-gray) {
    th.hc-table-sticky-border-elem-left.hc-table-sticky-border-elem-top, tr.hc-sticky-header th.hc-sticky-col:first-child {
        @include th-sticky-row-and-col();
    }
}

// sticky w borders
.hc-table-borders {
    th.hc-table-sticky, .hc-sticky-header th, .hc-sticky-header th.hc-col-sortable-left, .hc-sticky-header th.hc-col-sortable {
        @include th-border-header-sticky();

        &.hc-table-sticky-border-elem-left {
            @include th-sticky-row-and-col-borders();
        }
    }

    td.hc-table-sticky, td.hc-sticky-col, th.hc-sticky-col{
        @include th-border-col-sticky();
    }

    .hc-sticky-header th.hc-sticky-col {
        @include th-sticky-row-and-col-borders();
    }
}


// drag/drop stuff
.hc-draggable-header {
    position: relative;

    .ico-grip {
        position: absolute;
        left: 2px;
        color: $slate-gray-400;
        opacity: 0;
        background-image: url($ico-grip);
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        height: 16px;
        width: 16px;
        cursor: pointer;
    }

    &:hover, &.cdk-drag-preview {
        .ico-grip {
            opacity: 1;
            cursor: move;
        }
    }
}

.hc-table.cdk-drop-list-dragging {
    .cdk-drag {
        transform: translate3d(0px, 0px, 0px) !important;
    }

    .hc-draggable-header {
        &:before {
            content: " ";
            position: absolute;
            height: calc(100vh - 220px);
            max-height: calc(100vh - 220px);
            width: 100%;
            display: inline-block;
            left: 0;
            top: 0;
        }

        &:hover {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            background-color: transparentize($azure, 0.6) !important;
            .ico-grip {
                opacity: 0;
            }

            &:before {
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                background-color: transparentize($azure, 0.6) !important;
            }
        }
    }
}

.hc-draggable-header {
    &.cdk-drag-preview {
        display: inline-block;
        background-color: $white;
        padding: 8px 16px;
        border: 1px solid $slate-gray-100;
        border-radius: 4px;
        box-shadow: 0 0 3px $shadow;
        opacity: 0.9;
        color: $dark-blue;
    }

    &.cdk-drag-placeholder {
        transform: translate3d(0px, 0px, 0px) !important;
    }
}