// DIRECTIONAL
// ---------------------------------------------------------------
$rtl: 0 !default;
$dir: ltr !default;

@import "../theme/theme-imports";

.porto-popup-menu {
    line-height: 0;
    .main-menu {
        display: none;
        max-height: 80%;

        &:not(.scroll-content) {
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            min-width: 80%;
        }
        @media (min-width: 992px) {
            max-height: 50%;
        }
        > li.menu-item .popup {
            transform: none;
        }
        .sub-menu {
            display: none;
            padding: 10px 0;
        }
        li.menu-item {
            > a {
                position: relative;
                left: 0;
            }
            &:hover > a {
                left: 5px;
            }
            &.opened > .sub-menu {
                display: block;
            }
        }
    }
    .sub-menu {
        line-height: 30px;
        li.menu-item,
        li.menu-item > a {
            line-height: inherit;
        }
        li.menu-item > a {
            padding: .25rem 1rem;
        }
        .sub-menu {
            font-size: .8em;
            opacity: .7;
        }
    }
    .hamburguer-btn {
        margin: 0 15px;
    }
    &.opened {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9047;
        background: rgba(51, 51, 51, .99);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .25s;
        margin: 0 !important;
        .hamburguer-btn {
            position: absolute;
            #{$right}: 15px;
            top: 30px;
            z-index: 9;
        }
        .main-menu {
            display: block;
            > li.menu-item {
                float: none;
            }
            li.menu-item {
                > a {
                    width: 100%;
                    text-align: center;
                    transition: color .25s, left .25s;
                }
            }
        }
        .scroll-wrapper {
            width: 100%;
            max-width: 600px;
            @media (min-width: 992px) {
                width: 50%;
            }
        }
    }
    .hamburguer-btn .close span {
        background: #fff;
    }
}
.admin-bar .porto-popup-menu.opened .hamburguer-btn {
    top: 60px;
}

@media #{$screen-normal} {
    #header .porto-popup-menu.opened .main-menu {
        display: block;
    }
}