/* -------------------------------------------
    Flyout Menu
---------------------------------------------- */

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

.flyout-menu-container {
    width: auto;

    nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 0;
        top: -9999px;
        width: 100%;
        height: 100%;
        z-index: 2999;
        visibility: hidden;
        opacity: 0;
        background-color: rgba(255, 255, 255, .95);
        transition: opacity .5s, visibility .5s;
        overflow-x: auto;
    }

    .flyout-close {
        position: fixed;
        #{$right}: 2em;
        top: 2em;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s, visibility .3s;
        z-index: 2999;
    }

    header & .menu,
    .menu {
        display: block;
    }

    >a {
        display: inline-flex;
        transition: color .3s, border .3s, background .3s;

        &:after {
            content: none;
        }
    }

    &.show {

        nav,
        .flyout-close {
            visibility: visible;
            opacity: 1;
        }

        nav {
            top: 0;
        }
    }
}

.menu.flyout-menu {
    .menu-item-has-children {

        &::after,
        >a::after {
            content: none;
        }
    }

    li>ul {
        display: none;
        position: static;
        visibility: visible;
        opacity: 1;
        min-width: 0;
        max-width: 100%;
        transform: none;
        background: transparent;
        box-shadow: none;
    }

    li li:hover>a {
        background: transparent;
    }

    .megamenu {
        display: none;
    }

    .menu-item a {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    >li {
        >a {
            font-size: 30px;
            opacity: 0;
            transition: transform .3s, opacity .3s;
        }

        &:nth-child(odd)>a {
            transform: translateY(-100%) rotate(10deg);
        }

        &:nth-child(even)>a {
            transform: translateY(-100%) rotate(-10deg);
        }
    }

    .show &>li>a {
        opacity: 1;
        transform: translateY(0) rotate(0);
        pointer-events: auto;
        transition-timing-function: ease;
    }

    @for $i from 1 through 10 {
        >li:nth-of-type(#{$i})>a {
            transition-delay: calc(0s + (#{$i} - 1) * 0.05s);
        }

        .show &>li:nth-of-type(#{$i})>a {
            transition-delay: calc(0.5s - (10 - #{$i}) * 0.05s);
        }
    }

    ul {
        padding: 0;
    }

    .toggle-btn {
        position: static;
        transform: none;
        margin-#{$left}: 5px;

        &:before {
            content: '\f078';
            font-size: .5em;
        }
    }

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

    .flyout-menu-image {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        background-size: cover;
        background-position: center;
        transition: opacity cubic-bezier(.25, .46, .45, .94) 450ms;
        pointer-events: none;
        z-index: -1;
    }

    .menu-item:hover>.flyout-menu-image {
        opacity: 1;
    }
}