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

vn-monitor-index {
    .header {
        padding: 12px 0 5px 0;
        color: gray;
        font-size: 1.2rem;
        border-bottom: 2px solid $color-font-secondary;
        margin-bottom: 10px;

        & > vn-none > vn-icon {
            @extend %clickable-light;
            color: $color-button;
            font-size: 1.4rem;
        }

        vn-none > .arrow {
            transition: transform 200ms;
        }
    }

    vn-monitor-sales-clients {
        vn-card {
            margin-right: 15px;
        }

        .header {
            padding-right: 15px;

            & > vn-none > .arrow {
                display: none
            }
        }
    }

    vn-table.scrollable {
        height: 300px
    }

    vn-horizontal {
        flex-wrap: wrap
    }

    .hidden {
        vn-card {
            display: none
        }
        
        .header > vn-none > .arrow {
            transform: rotate(180deg);
        }
    }
}

@media (max-width:1150px) {
    vn-monitor-index {
        & > vn-horizontal {
            flex-direction: column;

            vn-monitor-sales-clients,
            vn-monitor-sales-orders {
                width: 100%
            }

            vn-monitor-sales-clients {
                margin-bottom: 15px
            }
        }

        vn-monitor-sales-clients {
            vn-card {
                margin-right: 0
            }

            .header {
                padding-right: 0;
    
                & > vn-none > .arrow {
                    display: inline-block
                }
            }
        }
    } 
}