@import "effects";

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

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

        vn-thead {
            display: table-header-group;

            vn-th[field] {
                position: relative;
                cursor: pointer
            }
            vn-th[field] > * {
                padding-right: 20px
            }
            vn-th[field] > :after {
                font-family: 'Material Icons';
                content: 'arrow_drop_down';
                position: absolute;
                padding-left: 2px;
                color: $lines;
                opacity: 0
            }
            vn-th[field] > :hover:after {
                opacity: 1
            }
            vn-th[field].active > :after {
                color: $main-font-color;
                opacity: 1
            }
            vn-th[field].desc > :after {
                content: 'arrow_drop_down';
            }
            vn-th[field].asc > :after {
                content: 'arrow_drop_up';
            }
        }
        vn-tbody {
            display: table-row-group
        }
        vn-tfoot {
            display: table-footer-group
        }
        vn-tr, a.vn-tr {
            display: table-row
        }
        vn-empty-rows {
            display: table-caption;
            caption-side: bottom;
            text-align: center;
            padding: 10px
        }
        vn-thead, vn-tbody, vn-tfoot {
            vn-tr, a.vn-tr {
                display: table-row;
    
                vn-th {
                    font-weight: bold
                }
                vn-td, vn-th {
                    vertical-align: middle;
                    display: table-cell;
                    text-align: left;
                    padding: 10px;
    
                    &[number] {
                        text-align: right;
                    }
                    &[center] {
                        text-align: center;
                    }
                    vn-icon.bright, i.bright {
                        color: #f7931e;
                    }
                }
            }
        }
        vn-thead, vn-tbody, vn-empty-rows {
            border-bottom: 3px solid $lines;
        }
        vn-tbody > vn-tr, vn-tbody > a.vn-tr{
            border-bottom: 1px solid $lines;
            transition: background-color 200ms ease-in-out;

            &.clickable {
                @extend %clickable;
            }
            &.success, & > vn-td.success {
                background-color: rgba(163, 209, 49, 0.3);
    
                &:hover {
                    background-color: rgba(163, 209, 49, 0.5);
                }
            }
            &.warning, & > vn-td.warning {
                background-color: rgba(247, 147, 30, 0.3);
            
                &:hover {
                    background-color: rgba(247, 147, 30, 0.5);
                }
            }
        }
    }
    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;
    }
}