////
/// 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} {
        // if no logo or titles, fill the space and add padding.
        &:first-child {
            flex: 100%;
            justify-content: flex-end;
            padding: 1em 0;
        }

        &.mobile-type {
            &-dropdown {
                &-slide,
                &-fade {
                    .menu__items {
                        left: 50%;
                        transform: translateX(-50%);
                        width: 90%;
                    }
                }
            }
        }

        .menu--header__items {
            background-color: var(
                --navigation--header-mobile--background-color
            );
        }
    }
}

// mixin to generate desktop nav styles
@mixin desktop-styles($screen) {
    &.mobile-at-#{$screen} {
        flex: 1 1 100%;
        .menu--header__items > .menu--header__item > .menu--header__link {
            min-height: var(--navigation--header--height);
            display: flex;
            align-items: center;
        }
    }
}

// Menu link color
a.menu--header__link {
    color: var(--navigation--header--color);
}

.menu--header {
    &__link {
        font-size: var(--navigation--header--font-size);
        line-height: var(--navigation--header--line-height);
    }

    .menu--toggle {
        margin-left: 0.6em;
        order: 2;
    }

    // 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 at mobile only styles
    @include screen('tablet-and-up') {
        @include desktop-styles('mobile');
    }

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

// Stacked vertical header styles
.app-header {
    @include screen('mobile') {
        &--mobile--vertical {
            .menu--header.mobile-at {
                &-always,
                &-mobile,
                &-tablet-and-under {
                    margin-top: 1em;
                }
            }
        }
    }

    @include screen('tablet-and-under') {
        &--tablet--vertical {
            .menu--header.mobile-at {
                &-always,
                &-tablet-and-under {
                    margin-top: 1em;
                }
            }
        }
    }

    @include screen('desktop') {
        &--desktop--vertical {
            .menu--header.mobile-at {
                &-always {
                    margin-top: 1em;
                }
            }
        }
    }
}
