.view-default {
    .app-quick-group{
        padding: 4px;
        background-color: var(--item-background-color-bright);
        .app-quick-item{
            margin-right: 8px;
            padding: 8px;
            cursor: pointer;
            .app-quick-item-label:hover {
                color: var(--ctrl-font-color-bright);
            }
            .app-seleted-item{
                display: inline-block;
                font-weight: 700;
                color: var(--ctrl-font-color-bright);
                padding: 4px;
                position: relative;
                &::after{
                    content: "";
                    height: 2px;
                    background-color: var(--ctrl-font-color-bright);
                    position: absolute;
                    bottom: -12px;
                    width: 100%;
                    left: 0px;
                }
            }
            .app-seleted-item:focus {
                outline: none;
            }
            .app-quick-item-counter{
                border-radius: 12px;
                padding-left: 4px;
                font-size: 12px;
                font-weight: 400;
                vertical-align: middle;
                display: inline-block;
                width: 18px;
                height: 18px;
                margin-left: 4px;
                background-color: var(--item-background-color-bright);
            }
        }
        .app-quick-item :hover{
            color: var(--item-font-color-light);
        }
    }
}

.view-style2 {
    .app-quick-group {
        height: 100%;
        display: flex;
        flex-direction: row;
    
        > .app-quick-item {
            cursor: pointer;
            color: var(--view-font-color);
            font-family: Segoe WPC, Segoe UI, Microsoft YaHei, sans-serif;
            font-weight: 700;
            font-size: 14px;
            padding: 5px 3px;
            margin-right: 8px;
    
            .app-seleted-item {
                display: inline-block;
                font-weight: 700;
                color: var(--view-font-color-bright);
                border-bottom: 1px solid;
            }
    
            .app-seleted-item:focus {
                outline: none;
            }
    
            .app-quick-item-counter {
                border-radius: 12px;
                padding: 0 4px;
                font-size: 12px;
                font-weight: 400;
                vertical-align: middle;
                display: inline-block;
                min-width: 18px;
                height: 18px;
                margin-left: 4px;
                text-align: center;
                background-color: #ddd;
            }
        }
    
        > .app-quick-item:hover {
            color: var(--view-font-color-bright);
        }
    }
    
    .mode-style2 {
        .app-quick-group {
            align-items: center;
        }
    }
    
    .app-quick-item-dropdown {
        outline: none;
    }
    
}