@import "effects";

vn-table {
    border-collapse: collapse;
    display: table;
    width: 100%;

    & > div {
        width: 100%;
        display: table;

        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 {
            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 {
                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 {
            border-bottom: 1px solid $lines;
            transition: background-color 200ms ease-in-out;

            &.clickable {
                @extend %clickable;
            }
            &.success {
                background-color: rgba(163, 209, 49, 0.3);
    
                &:hover {
                    background-color: rgba(163, 209, 49, 0.5);
                }
            }
            &.warning {
                background-color: rgba(247, 147, 30, 0.3);
            
                &:hover {
                    background-color: rgba(247, 147, 30, 0.5);
                }
            }
        }
    }
}