@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> NAVIGATION -> NAVBAR
    ========================================================================  */

// Check if the elements with navbar should be imported
@if $import-elements and $import-element-navbar {
    .navbar {
        align-items: center;
        color: $navbar-font-color;
        display: flex;
        flex-wrap: wrap;
        font-size: $navbar-font-size;
        position: relative;
        margin: 0;
        margin-bottom: $navbar-element-spacing;

        // Nested selectors
        a:not(.button) {
            color: $navbar-link-color;

            // Pseudo classes
            &:hover {
                color: $navbar-link-color-hover;
            }

            &:focus {
                color: $navbar-link-color-focus;
            }

            &:active {
                color: $navbar-link-color-active;
            }
        }

        .navbar__logo,
        .navbar__links,
        .navbar__bars {
            padding: 0 ($navbar-content-spacing / 2);

            // Pseudo classes
            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                padding-right: 0;
            }
        }

        .navbar__logo {
            display: flex;
            flex: 1 0 25%;

            // Nested selectors
            a:not(.button) {
                display: inline-flex;
            }
        }

        .navbar__links {
            display: none;

            // Nested selectors
            ul,
            ol {
                // Styles
                display: none;
                list-style: none;
                margin: 0;
                padding: 0;

                // Nested selectors
                li {
                    // Styles
                    flex: 1 0 auto;

                    // Nested selectors
                    a:not(.button) {
                        // Styles
                        display: inline-flex;
                        padding: $navbar-content-spacing;
                    }
                }
            }
        }

        .navbar__icons {
            // Nested selectors
            #{$button} {
                // Styles
                margin-bottom: 0;
                margin-right: ($navbar-content-spacing / 4);

                // Pseudo classes
                &:last-child {
                    // Styles
                    margin-right: 0;
                }
            }
        }

        .navbar__revealer {
            // Styles
            display: none;
            flex: 1 0 100%;
            padding: $navbar-content-spacing;

             // Nested selectors
            ul,
            ol {
                // Styles
                display: flex;
                flex-direction: column;
                list-style: none;
                margin: 0;
                padding: 0;

                 // Nested selectors
                li {
                    // Styles
                    flex: 1 0 auto;

                     // Nested selectors
                    a:not(.button) {
                        // Styles
                        align-items: center;
                        display: flex;
                        justify-content: center;
                        padding: ($navbar-content-spacing / 2) $navbar-content-spacing;
                    }
                }
            }
        }

        // Breakpoint
        @include breakpoint('desktop-up') {
            // Nested selectors
            .navbar__links {
                // Nested selectors
                ul,
                ol {
                    // Styles
                    display: flex;
                }
            }

            .navbar__icons {
                // Styles
                display: none;
            }

            .navbar__links {
                // Styles
                display: flex;
            }

            .navbar__revealer {
                // Styles
                display: none !important;
            }
        }
    }
}