@import "../../assets/css/mixin.scss";
.component_submenu{
    .component_container{
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        margin-bottom: -10px;

        .menubar{
            font-size: 15px;
            line-height: 15px;
            height: 15px;
            margin-top: 5px;
            color: var(--light);
            margin: 5px 0 10px 0;

            /* Create Buttons */
            > span, form label {
                display: inline-block;
                margin-top: -5px;
                border-radius: 2px;
                cursor: pointer;

                &:active, &:hover{
                    color: var(--color);
                }
                @include ripple(var(--bg-color));
            }
            > span{
                padding: 5px 8px;
                letter-spacing: 0.06em;
                display: inline-block;
                text-transform: uppercase;
                font-size: 12px;
                color: var(--light);
                vertical-align: text-bottom;
            }

            > div {cursor: pointer; margin-right: 15px;}
            .view{
                float: right;
                padding: 2px;
                transition: 0.15s ease-out background;
                margin-right: 0px;
                margin-left: 0px;
                & .search, &.list-grid, > .dropdown_button, form > label {
                    min-width: inherit;
                    border-radius: 2px;
                    padding: 5px;
                    margin: 2px 0 2px 0;
                }
                &.list-grid, & .dropdown_button, & .search{ @include ripple(var(--bg-color)); }

                .dropdown_container .component_icon{
                    box-sizing: border-box;
                    border: 2px solid rgba(0,0,0,0);
                }
                &.list-grid, & .search{margin-top: -5px!important;}
                &.component_dropdown {
                    &.active .dropdown_button{
                        box-shadow: none;
                    }
                    margin-top: -10px;
                }
            }
            &.search_focus form input{transition: 0.2s width ease-in;}
            form{
                float: right;
                margin-top: -3px;
                input{
                    font-size: 1em;
                    margin-top: -3px;
                    border: none;
                    background: inherit;
                    border-bottom: 2px solid var(--light);
                    color: var(--color);
                }
            }
            &.search_focus > span {
                display: none;
            }

            .component_icon{
                height: 15px;
                width: 15px;
            }
        }
    }

    .submenuwithSelection-appear{
        display: inline-block;
        opacity: 0;
        transform: translateY(3px);
        transition: opacity 0.2s ease, transform 0.4s ease;
    }
    .submenuwithSelection-appear.submenuwithSelection-appear-active{
        opacity: 1;
        transform: translateY(0px);
    }
}