@import "effects";
@import "variables";

vn-table {
    display: block;
    width: 100%;
    overflow: auto;
}
.vn-table {
    width: 100%;
    display: table;
    border-collapse: collapse;

    & > vn-thead,
    & > thead {
        display: table-header-group;
        border-bottom: $border;

        & > * > th {
            font-weight: normal;
        }
        & > * > vn-th[field] {
            overflow: visible;
            cursor: pointer
        }
    }
    & > vn-tbody,
    & > a.vn-tbody,
    & > tbody {
        display: table-row-group;
    }
    & > vn-tfoot,
    & > .vn-tfoot,
    & > tfoot {
        border-top: $border;
        display: table-footer-group
    }
    & > * > vn-tr,
    & > * > a.vn-tr,
    & > * > tr {
        display: table-row;
        height: 48px;
    }
    & > thead,
    & > tbody,
    & > tfoot,
    & > vn-thead,
    & > vn-tbody,
    & > vn-tfoot,
    & > .vn-thead,
    & > .vn-tbody,
    & > .vn-tfoot {
        & > * {
            display: table-row;

            & > vn-th,
            & > th {
                color: $color-font-light;
                padding-top: 16px;
                padding-bottom: 12px;
            }
            & > vn-th,
            & > vn-td,
            & > th,
            & > td {
                overflow: hidden;
            }
            & > vn-th,
            & > vn-td,
            & > vn-td-editable,
            & > th,
            & > td {
                vertical-align: middle;
                display: table-cell;
                text-align: left;
                padding: 9px 8px;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 80px;

                &[number] {
                    text-align: right;
                    width: 96px;
                }
                &[center] {
                    text-align: center;
                }
                &[shrink] {
                    width: 1px;
                    text-align: center;
                }
                &[shrink-date] {
                    width: 100px;
                    max-width: 100px;
                }
                &[shrink-datetime] {
                    width: 150px;
                    max-width: 150px;
                }
                &[expand] {
                    max-width: 400px;
                    min-width: 0;
                }
                vn-icon.bright, i.bright {
                    color: #f7931e;
                }
            }
            & > :last-child {
                padding-right: 22px;
            }
            & > :first-child {
                padding-left: 22px;
            }
        }
        & > a.vn-tr {
            color: inherit;
        }
    }
    & > a.vn-tbody {
        &.clickable {
            @extend %clickable;
        }
    }
    & > vn-tbody > *,
    & > .vn-tbody > *,
    & > tbody > * {
        border-bottom: $border-thin;

        &:last-child {
            border-bottom: none;
        }
        &.clickable {
            @extend %clickable;
        }
        & > vn-td,
        & > td {
            .chip {
                padding: 4px;
                border-radius: 4px;

                &.notice {
                    background-color: $color-notice-medium;
                    color: $color-font-bg;
                }
                &.success {
                    background-color: $color-success-medium;
                    color: $color-font-bg;
                }
                &.warning {
                    background-color: $color-main-medium;
                    color: $color-font-bg;
                }
                &.alert {
                    background-color: lighten($color-alert, 5%);
                    color: $color-font-bg;
                }
                &.message {
                    background-color: $color-font-bg-dark;
                    color: $color-font-bg;
                }
                &.dark-notice {
                    background-color: $color-notice;
                    color: $color-font-bg;
                }
                &.yellow {
                    background-color: $color-yellow;
                    color: $color-font-bg;
                }
                &.pink {
                    background-color: $color-pink;
                    color: $color-font-bg;
                }
            }
            vn-icon-menu {
                display: inline-block;
                color: $color-main;
                padding: 4px
            }
        }
        & > [actions] {
            width: 1px;

            & > * {
                vertical-align: middle;
            }
        }
    }
    .vn-textfield {
        float: right;
        margin: 0!important;
    }
    .vn-check {
        margin: 0;
    }
    .empty-rows {
        color: $color-font-secondary;
        font-size: 1.375rem;
        text-align: center;
    }
}


vn-table.scrollable,
vn-table.scrollable > .vn-table,
.vn-table.scrollable {
    border-collapse: separate;
    overflow: auto;

    vn-thead, thead {
        border-bottom: 0px solid transparent
    }

    vn-thead th,
    vn-thead vn-th,
    thead vn-th,
    thead th {
        border-bottom: $border;
        background-color: $color-bg-panel;
        position: sticky;
        z-index: 9;
        top: 0
    }
}

vn-table.scrollable.sm,
.vn-table.scrollable.sm {
    max-height: 300px
}

vn-table.scrollable.lg,
.vn-table.scrollable.lg {
    max-height: 700px
}

.tableWrapper {
    overflow-x: auto;
}