/* -------------------------------------------
    Mobile Menu Dropdown Type
---------------------------------------------- */

@import '../config';
@import '../mixins';
@import '../direction';

.mobile-menu-toggle {

    .mmenu-hide-icon,
    &.active .mmenu-show-icon {
        display: none;
    }

    &.active .mmenu-hide-icon {
        display: block;
    }
}

.nav-dropdown {
    --alpha-mmenu-dropdown-mobile-height: 50vh;
    --alpha-mmenu-dropdown-border-color: #323334;
    --alpha-mmenu-dropdown-bg-color: #222;
    --alpha-mmenu-dropdown-item-color: inherit;
    --alpha-mmenu-dropdown-item-hover-color: var(--alpha-primary-color);

    position: absolute;
    width: 100vw;
    #{$left}: 0;
    background: var(--alpha-mmenu-dropdown-bg-color);
    z-index: 1059;
    box-shadow: 0 11px 30px rgba(0, 0, 0, .15);

    &.preload {
        opacity: 0;
        visibility: hidden;
    }

    &.nav-wrapper .toggle-btn {
        #{$right}: 15px;

        &:before {
            font-size: .8em;
            transform: rotate(90deg);
        }

        @include mq(xs) {
            #{$right}: 25px;
        }
    }

    .mobile-menu {
        font-size: 13px;

        a {
            padding: 15px 20px;
            color: var(--alpha-mmenu-dropdown-item-color);

            &:hover {
                color: var(--alpha-mmenu-dropdown-item-hover-color);
            }

            @include mq(xs) {
                padding-left: 30px;
                padding-right: 30px;
            }
        }

        >li>ul {
            margin-bottom: 0;
        }

        >li:first-child,
        >li:last-child {
            padding: 0;
        }

        .menu-item-has-children>a {
            margin-bottom: -1px;
        }

        li ul a {
            padding-#{$left}: 35px;

            @include mq(xs) {
                padding-#{$left}: 45px;
            }
        }

        ul ul li a {
            padding-#{$left}: 55px;

            @include mq(xs) {
                padding-#{$left}: 65px;
            }
        }

        .toggle-btn {
            &:before {
                font-size: 1em;
                content: '\e913';
                font-family: $framework-font;
            }
        }
    }

    &.nav-wrapper .mobile-menu li:not(:last-child),
    &.nav-wrapper .mobile-menu .menu-item-has-children>a {
        border-bottom: 1px solid var(--alpha-mmenu-dropdown-border-color);
    }

    .show>.toggle-btn:before,
    .show>a .toggle-btn:before {
        transform: rotate(270deg);
    }

    .fixed & {
        max-height: var(--alpha-mmenu-dropdown-mobile-height);
        overflow-y: auto;
    }
}

.icon-anim-burger {
    --alpha-mmenu-toggle-weight: 1px;

    display: block;
    width: var(--alpha-mmenu-toggle-size);

    &:before,
    .mid-line,
    &:after {
        width: 100%;
        content: "";
        display: block;
        border-bottom: var(--alpha-mmenu-toggle-weight) solid;
        box-sizing: border-box;
        border-width: var(--alpha-mmenu-toggle-weight);
        border-color: var(--alpha-mmenu-toggle-color);
        transition: .3s;
    }

    &:before {
        border-top: var(--alpha-mmenu-toggle-weight) solid;
        border-bottom: none;
        border-color: var(--alpha-mmenu-toggle-color);
        transform-origin: 100% 0%;
    }

    .mid-line {
        margin: calc(var(--alpha-mmenu-toggle-size) / 4) 0;
        transform-origin: 100% 0%;
    }

    &:after {
        bottom: 0;
        transform-origin: 100% 100%;
    }

    .active & {

        &:before,
        .mid-line,
        &:after {
            width: 90%;
            border-color: var(--alpha-mmenu-toggle-hover-color);
        }

        &:before {
            transform: rotate(-45deg);
        }

        .mid-line {
            transform: scale(0, 1);
        }

        &::after {
            transform: rotate(45deg);
        }
    }
}

.mobile-menu-light .nav-dropdown {
    --alpha-mmenu-dropdown-border-color: #e5e5e5;
    --alpha-mmenu-dropdown-bg-color: #fff;
    --alpha-mmenu-dropdown-item-color: $dark-color;
}