.widget_nav_menu {
    &.horizontal{
        .menu{
            display: flex;
            flex-wrap: wrap;
            margin: -8px;
            li{
                flex: 0 0 auto;
                width: auto;
                max-width: 100%;
                padding: 8px;
                a{
                    padding: 0;
                    display: inline-block;
                    border-bottom: 1px solid transparent;
                    &:hover{
                        border-color: $secondary_color;
                    }
                }
                &:after{
                    content: '';
                    width: 4px;
                    height: 4px;
                    display: inline-block;
                    margin-left: 8px;
                    @include border-radius(50%);
                    
                    [dir="rtl"] &{
                        margin-left: 0;
                        margin-right: 8px;
                    }
                }
                &:last-child:after{
                    display: none;
                }
            }
        }
        .sub-menu{
            display: none;
        }
    }
}
// Widgets Menu
.widget{
    .cms-widget-menu-item{
        position: relative;
        &:last-child{
            padding-bottom: 0;
        }
        > a{
            font-weight: 700;
            background: $primary_color;
            color: $white;
            padding: 20px;
            @include border-radius(6px);
            &:hover{
                background: $accent-color;
            }
        }
        // current
        &[class*="current-"] > a{
            background: $accent-color;
            .count {
                background: var(--color-primary);
            }
        }
        .title{
            @include text-ellipsis();
        }
        .cms-menu-toggle{
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            background: $accent-color;
            color: $white;
            font-size: 10px;
            @include border-radius(50%);
            &:hover{
                background-color: $primary-color;
            }
            &:before{
                @include font-cmsi("\e91d");
            }
            &.open:before{
                content: '\e920';
            }
        }
        &:hover,
        &[class*="current-"] {
           > a .cms-menu-toggle{
                background-color: $primary-color;
            }
        }
        .cms-dropdown{
            display: none;
            padding-left: 0;
            margin-top: 2px;
        }
    }
}