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

vn-table {
    display: block;
    overflow: auto;
    width: 100%;

    & > div {
        width: inherit;
        display: table;
        border-collapse: collapse;

        & > vn-thead {
            display: table-header-group;
            border-bottom: .15em solid $color-spacer;

            & > * > 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 {
            display: table-row-group;
        }
        & > vn-tfoot {
            border-top: .15em solid $color-spacer;
            display: table-footer-group
        }
        & > * > vn-tr,
        & > * > a.vn-tr {
            display: table-row
        }
        vn-thead, vn-tbody, vn-tfoot {
            & > * {
                display: table-row;

                & > vn-th {
                    font-weight: bold;
                    padding-top: 1em;
                    padding-bottom: .8em;
                }
                & > vn-th,
                & > vn-td,
                & > vn-td-editable {
                    vertical-align: middle;
                    display: table-cell;
                    text-align: left;
                    padding: .6em .5em;
                    white-space: nowrap;
                    overflow: hidden;
                    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: 10em;
                        min-width: 0;
                    }
                    vn-icon.bright, i.bright {
                        color: #f7931e;
                    }
                }
                & > :last-child {
                    padding-right: 1em;
                }
                & > :first-child {
                    padding-left: 1em;
                }
            }
            & > a.vn-tr {
                color: inherit;
            }
        }
        vn-tbody > * {
            border-bottom: .1em solid $color-spacer-light;

            &:last-child {
                border-bottom: none;
            }
            &.clickable {
                @extend %clickable;
            }
            & > vn-td > .chip {
                padding: .3em;
                border-radius: .3em;
            }
            &.notice,
            & > .notice,
            & > vn-td > .notice {
                color: $color-font-bg;
                background-color: $color-notice-medium;
            }
            &.success,
            & > .success,
            & > vn-td > .success {
                color: $color-font-bg;
                background-color: $color-success-medium;
            }
            &.warning,
            & > .warning,
            & > vn-td > .warning {
                color: $color-font-bg;
                background-color: $color-main-medium;
            }
            &.alert,
            & > .alert,
            & > vn-td > .alert {
                color: $color-font-bg;
                background-color: $color-alert-medium;
            }
            & > [actions] {
                width: 1px;

                & > * {
                    vertical-align: middle;
                }
            }
        }
        & > vn-empty-rows {
            display: table-caption;
            caption-side: bottom;
            text-align: center;
            padding: 1.5em;
            width: 100%;
            box-sizing: border-box;
        }
    }
    vn-autocomplete {
        div.mdl-textfield {
            padding: 0px !important;
        }
        label.mdl-textfield__label:after {
            bottom: 0;
        }
        div.icons {
            display: none !important;
        }
    }
    vn-textfield {
        max-width: 100px;
        float: right;
        margin: 0!important;
    }
}