////
/// Nav menu component.
///
/// @group  Components
/// @author Sky Shabatura <theme@sky.camp>
/// @link   https://taproot-theme.com
////

// mixin to generate mobile nav styles
@mixin mobile-styles($screen) {
    .mobile-at-#{$screen} {
        // dropdown styles
        .menu__sub-menu {
            display: none;
            opacity: 0;
            height: 0;
            overflow: hidden;

            // dropdown styles when open
            &.is-open {
                opacity: 1;
                display: flex;
                height: auto;
            }
        }

        .menu__items .menu__item.has-children > a {
            padding-right: 4em;
        }

        // fixes issue in safari
        .menu__item.has-children {
            transform: translateX(0px);
        }

        // dropdown icon
        .dropdown-target {
            transition: all 0.5s ease-in-out;
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 4em;
            display: flex;
            align-items: center;
            justify-content: center;

            &.is-open {
                transform: rotateZ(180deg);
            }
        }

        // global mobile styles
        &.mobile-type-slide,
        &.mobile-type-fullscreen,
        &.mobile-type-dropdown-slide,
        &.mobile-type-dropdown-fade {
            .menu__items {
                display: none;
                &.is-open {
                    display: flex;
                }
            }

            .menu__items > .menu__item:not(:first-of-type),
            .menu__sub-menu .menu__item {
                border-top-width: 1px;
                border-top-style: solid;
            }

            .menu__item {
                // prevent artifacting in Safari when animating menus
                transform: translateZ(0);
            }
        }

        // fixed type mobile styles
        &.mobile-type-slide,
        &.mobile-type-fullscreen {
            .menu__items {
                position: fixed;
                height: 100%;
            }
        }

        // slide nav styles
        &.mobile-type-slide {
            &.menu--right {
                .menu__items {
                    right: 0;
                }
            }

            &.menu--left {
                .menu__items {
                    left: 0;
                }
            }

            .menu__items {
                z-index: -1;
                width: 300px;

                & > .menu__item:last-of-type {
                    border-bottom-width: 1px;
                    border-bottom-style: solid;
                }
            }
        }

        // fullscreen nav styles
        &.mobile-type-fullscreen {
            .menu__items {
                width: 100%;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                padding: 15%;
                z-index: 100;
            }

            .menu__items > .menu__item {
                &:first-of-type {
                    border-top-width: 1px;
                    border-top-style: solid;
                }
                &:last-of-type {
                    border-bottom-width: 1px;
                    border-bottom-style: solid;
                }
            }

            .menu--toggle {
                position: relative;

                &.is-open {
                    z-index: 101;
                }
            }
        }

        // dropdown nav styles
        &.mobile-type-dropdown-slide,
        &.mobile-type-dropdown-fade {
            .menu__items {
                position: absolute;
                top: 100%;
                box-shadow: 0 1px 0px 1px rgba(175, 175, 175, 0.2);
                overflow: hidden;
            }
        }
    }
}

// mixin to generate desktop nav styles
@mixin desktop-styles($screen) {
    .mobile-at-#{$screen} {
        .menu {
            &__sub-menu {
                z-index: 2;

                .menu__sub-menu {
                    top: -0.4em;
                    left: 100%;
                    width: 100%;
                }

                // if class "open-on-left" is added to the parent item,
                // open third level submenus on left instead of right.
                .menu__item.open-on-left .menu__sub-menu {
                    left: -100%;
                }

                .menu__item.has-children {
                    .dropdown-target--icon {
                        transition: transform 0.3s ease-in-out;
                    }

                    &:hover .dropdown-target--icon {
                        transition: transform 0.3s ease-in-out;
                        transform: rotate(0deg);
                    }
                }
            }

            &__item {
                &.has-children {
                    .menu__sub-menu {
                        position: absolute;
                        visibility: hidden;
                        opacity: 0;
                        padding: 0.4em 0;
                        transition: all 0.5s ease-in-out;
                    }

                    &:hover > .menu__sub-menu {
                        visibility: visible;
                        opacity: 1;
                        transition: all 0.5s ease-in-out;
                    }
                }
            }

            &__items > .menu__item > .menu__sub-menu {
                transform: translateX(-50%);
                left: 50%;
                width: 10em;
                min-width: 100%;

                &:before {
                    content: ' ';
                    position: absolute;
                    width: 0;
                    height: 0;
                    z-index: 1000;
                    left: 50%;
                    bottom: 100%;
                    margin-left: -7px;
                    border: 7px solid transparent;
                    border-bottom-color: inherit;
                }

                .menu__link {
                    line-height: 1.2em;
                    padding: 0.4em 1em;
                    font-size: 0.875em;
                }
            }
        }

        .submenus-open-left .menu__sub-menu {
            .menu__sub-menu {
                right: 100%;
                left: auto;
            }

            .menu__item.has-children:hover .dropdown-target--icon {
                transform: rotate(90deg);
            }
        }

        .dropdown-target {
            padding-left: 0.4em;
            margin-right: -1em;
            text-align: center;
        }

        .menu--theme__sub-menu .dropdown-target {
            margin-right: 0;
        }
        .menu--theme__sub-menu .menu--theme__item.has-children.open-on-left {
            & > .menu__link {
                flex-direction: row-reverse;
            }
            &:hover .dropdown-target--icon {
                transform: rotate(180deg);
            }
        }
    }
}

// ****************
// * Mobile Styles
// ****************

// always mobile
@include mobile-styles('always');

// mobile only styles
@include screen('mobile') {
    @include mobile-styles('mobile');
}

// tablet and under styles
@include screen('tablet-and-under') {
    @include mobile-styles('tablet-and-under');
}

// ****************
// * Desktop Styles
// ****************

// never mobile styles
@include desktop-styles('never');

// mobile only styles
@include screen('tablet-and-up') {
    @include desktop-styles('mobile');
}

// tablet and under styles
@include screen('desktop') {
    @include desktop-styles('tablet-and-under');
}
