@import "../../@theme/styles/themes";

@include nb-install-component() {
    table.fancy {
        table-layout: fixed;
        border-collapse: separate !important;
        border: 1px solid nb-theme(border-basic-color-5);
        box-shadow: nb-theme(shadow);
        border-top: 0px;
        user-select: none;
        border-spacing: 0;
        table tbody,
        table thead {
            display: block;
        }

        th:first-child,
        td:first-child {
            /* Apply a left border on the first <td> or <th> in a row */
            border-left: 1px solid nb-theme(border-basic-color-5);
        }
        td {
            //display: block;
            text-overflow: ellipsis;
            //border: 1px solid nb-theme(border-basic-color-5);
            padding: 5px 0.5rem; //0.5rem;
            background: transparent;
            border-bottom: 1px solid nb-theme(border-basic-color-5);
            border-right: 1px solid nb-theme(border-basic-color-5);
        }

        tr.grouprow > td {
            padding: 0.5rem;
        }
        tr.groupedItem > td {
            padding: 0 0.5rem;
        }
        td > div {
            //width: 50px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        tr {
            height: nb-theme(text-paragraph-font-size);
            white-space: nowrap;
            overflow: hidden;
        }

        tr.grouprow {
            color: nb-theme(text-alternate-color);
            background: nb-theme(color-primary-300) !important;
            cursor: pointer;
            user-select: none;
        }

        tr.collapsed {
            display: none;
        }

        tbody {
            tr:hover {
                background: nb-theme(background-basic-color-4);
            }

            tr.selected {
                color: nb-theme(text-alternate-color);
                background: nb-theme(color-info-300);
            }

            tr.focused {
                // border: 2px dotted nb-theme(color-info-900);
                border: 2px dotted nb-theme(text-basic-color);

                td {
                    border-top: 2px dotted nb-theme(text-basic-color);
                    border-bottom: 2px dotted nb-theme(text-basic-color);
                }
                td:first-child {
                    border-left: 2px dotted nb-theme(text-basic-color);
                }
                td:last-child {
                    border-right: 2px dotted nb-theme(text-basic-color);
                }
            }
        }

        tbody tr:nth-child(even):not(:hover):not(.selected) {
            background: nb-theme(background-basic-color-1);
        }

        tbody tr:nth-child(odd):not(:hover):not(.selected) {
            background: nb-theme(background-basic-color-2);
        }
        thead {
            th {
                background: white;
                position: sticky;
                top: 0;
                //top: -16px;
                box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
                height: 2.4rem;
                padding: 0 5px;
                background: nb-theme(background-basic-color-1);
                border-bottom: 1px solid nb-theme(border-basic-color-5);
                border-right: 1px solid nb-theme(border-basic-color-5);
                z-index: 100;
            }
            tr:nth-child(1) th {
                border-top: 2px solid nb-theme(border-basic-color-5);
                cursor: pointer;
                user-select: none;
            }
            tr:nth-child(2) th {
                top: calc(2.4rem);
                height: 3rem;
            }
        }
    }
}

table.fancy.overflow-x {
    table-layout: auto;
}
// .searchclear {
//     position: absolute;
//     right: 5px;
//     top: 0;
//     height: 14px;
//     margin: auto;
//     font-size: 14px;
//     cursor: pointer;
// }
::ng-deep nb-checkbox.ftCheck {
    width: 20px;
    display: block;
    > .label {
        cursor: pointer;
    }
}

.cdk-drag-preview {
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
    opacity: 0;
}

.cdk-drag-animating {
    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.tableContainer {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    &.colResizing {
        cursor: ew-resize !important;
    }
}
.tableContainer.overflow-x {
    overflow-x: auto;
}

:host {
    height: 98%;
    display: block;
    //overflow: hidden;
}
.bottomShadow {
    box-shadow: 0 2px 1rem 10px rgba(44, 51, 73, 0.25);
    position: relative;
    bottom: 4px;
    width: 98%;
    left: 30px;
}

.dragHandle {
    position: absolute;
    //background-color: cornflowerblue;
    z-index: 2;
    transform: translate(0, 0) !important;
}

.dragHandle.right {
    right: 0px;
    width: 2px;
    height: 100%;
    cursor: ew-resize;
    top: 0;
}

.btnClearAllFilter {
    /* Add animation */
    -webkit-animation-name: fadeFromTop; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */
    animation-name: fadeFromTop;
    animation-duration: 0.5s;

    position: absolute;
    right: 28px;
    margin-top: 41px;
    z-index: 1011;
    .clearTooltip {
        -webkit-transition: width 0.5s ease-in-out;
        -moz-transition: width 0.5s ease-in-out;
        -o-transition: width 0.5s ease-in-out;
        transition: width 0.5s ease-in-out;
        width: 0;
        overflow: hidden;
    }
    &:hover .clearTooltip {
        padding-left: 6px;
        width: 110px;
    }
}
.currency{
    text-align: right;
}