/*****************************
32 - Layout - Mobile Menu
*****************************/
// mobile header
.offside{
    overflow-y: hidden;
    &-button{
        border: none;
        background: transparent;
        font-size: 32px;
        outline: none !important;
    }
}

.offcanvas-mobile-menu{
    background: $color-white;
    .user-set-role{
        font-size: 12px;
        li{
            display: block;
            margin-right: 20px;
            &:last-child{margin-right: 0;}
    
            a{
                display: block;
                color: $color-black-1;
                i{
                    padding-left: 10px;
                    font-size: 10px;
                }
            }
        }
    }
}

.offcanvas{
    padding: 40px 20px;
    
    &--open{
        border: none;
        background: transparent;
        font-size: 32px;
        outline: none !important;
    }

    // OffCanvas Menu
    &-menu li{
        position: relative;
        padding: 5px 5px;
    }

    &-menu > ul > li{
        border-bottom: 1px solid transparent;

        &:last-child{
            border-bottom: none;
        }
    }

    &-menu li a{
        display: block;
        color: $color-black-1;
        text-decoration: none;
        &:hover{
            color: $color-primary;
        }
    }
    &-menu li .sub-menu{
        display: none;
    }

    &__menu-expand{
        &::after{
            content: "\f067";
            position: absolute;
            font-family: 'Font Awesome 5 Free';
            right: 0;           
            transition: all .3s ease;
            color: $color-black-1;
        }
    }

    &-menu .active > &__menu-expand,
    .sub-menu > .active &__menu-expand{

        &:last-child{
            border-bottom: none;
        }
        &::after{
            color: $color-primary;
            content: "\f068";
        }
    }


    // OffCanvas User Button

    &-shop-link{
        display: flex;
        justify-content: center;

        a{
            color: $color-black-1;
            text-decoration: none;
            transition: all .3s ease;
            text-align: center;
            margin-right: 15px;
            &:last-child{
                margin-right: 0;
            }

            &:hover{
                color:  $color-primary;
            }
        }
    }
        // Footer Address
        &__address{
            text-align: left;
            @include breakpoint(large){text-align: center;}
            &-item{
                margin-bottom: 6px;
                color: $color-gray !important;

                &:last-child{
                    margin-bottom: 0px;
                }

                span{
                    color: $color-primary;
                }

                a{
                    color: $color-gray;
                    &:hover{
                        color: $color-primary;
                    }
                }
            }
        }

        .offcanvas__social-nav{
            display: flex;
            justify-content: center;
            margin-top: 15px;
        }

        .offcanvas__social-list{
            margin-right: 15px;
            &:last-child{margin-right: 0;}
        }

        .offcanvas__social-link{
            display: inline-block;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            line-height: 35px;
            text-align: center;
            transition: $transition3ms;
            color: $color-black-1;
            background:$color-white-3;
            &:hover{color: $color-primary;}
        }

}