@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: .15em solid $color-spacer;

        & > * > th {
            font-weight: normal;
        }
        & > * > vn-th[field] {
            position: relative;
            overflow: visible;
            cursor: pointer;

            &.active > :after {
                color: $color-font;
                opacity: 1;
            }
            &.desc > :after {
                content: 'arrow_drop_down';
            }
            &.asc > :after {
                content: 'arrow_drop_up';
            }
            & > :after {
                font-family: 'Material Icons';
                content: 'arrow_drop_down';
                position: absolute;
                color: $color-spacer;
                opacity: 0;
            }
            &:hover > :after {
                opacity: 1;
            }
        }
    }
    & > vn-tbody,
    & > tbody {
        display: table-row-group;
    }
    & > vn-tfoot,
    & > tfoot {
        border-top: .15em solid $color-spacer;
        display: table-footer-group
    }
    & > * > vn-tr,
    & > * > a.vn-tr,
    & > * > tr {
        display: table-row;
        height: 3em;
    }
    vn-thead, vn-tbody, vn-tfoot,
    thead, tbody, tfoot {
        & > * {
            display: table-row;

            & > vn-th,
            & > th {
                color: $color-font-light;
                padding-top: 1em;
                padding-bottom: .8em;
            }
            & > 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: .6em .5em;
                white-space: nowrap;
                text-overflow: ellipsis;
                max-width: 5em;

                &[number] {
                    text-align: right;
                    width: 6em;
                }
                &[center] {
                    text-align: center;
                }
                &[shrink] {
                    width: 1px;
                    text-align: center;
                }
                &[expand] {
                    max-width: 25em;
                    min-width: 0;
                }
                vn-icon.bright, i.bright {
                    color: #f7931e;
                }
            }
            & > :last-child {
                padding-right: 1.4em;
            }
            & > :first-child {
                padding-left: 1.4em;
            }
        }
        & > a.vn-tr {
            color: inherit;
        }
    }
    vn-tbody > *,
    tbody > * {
        border-bottom: .1em solid $color-spacer-light;

        &:last-child {
            border-bottom: none;
        }
        &.clickable {
            @extend %clickable;
        }
        & > vn-td,
        & > td {
            .chip {
                padding: .3em;
                border-radius: .3em;
                color: $color-font-bg;

                &.notice {
                    background-color: $color-notice-medium
                }
                &.success {
                    background-color: $color-success-medium;
                }
                &.warning {
                    background-color: $color-main-medium;
                }
                &.alert {
                    background-color: $color-alert-medium;
                }
                &.message {
                    color: $color-font-dark;
                    background-color: $color-bg-dark
                }
            }
            vn-icon-menu {
                display: inline-block;
                color: $color-main;
                padding: .25em
            }
        }
        & > [actions] {
            width: 1px;

            & > * {
                vertical-align: middle;
            }
        }
    }
    .vn-textfield {
        float: right;
        margin: 0!important;
    }
    .vn-check {
        margin: 0;
    }
}