/** * POSITION * **/
$centered: true; // Para el menú // true or false
$fixed: true; // (Flotante)

/** * BACKGROUNDS * **/
$navBgColor: rgba($black, 0.2); // background de toda la barra de navegación
$navBgColorScrolled: rgba($black, 1);
$menuMobileBG: rgba($black, 1); // Normalmente va sólido.

/** * OTHER STYLES * **/
$navShadow: none; // full shadow
$scrolledBlur: true; // Desenfocar el fondo si la barra es transparente
$navbarBorderBottom: 1px solid rgba(white, 0.1);

/** * BALLOON MODE * **/
$balloon: false; // true or false
$balloonBg: $white;
$balloonPadding: 10px 60px;
$balloonRadius: 1000px;
$balloonPaddingMobile: 10px 2rem;
$balloonMenuRadiusMobile: 32px;
$balloonShadow: 0px 3px 10px rgba(black, 0.1);

/** * FONTS & LINKS * **/
$linkFont: $titleFont;
$linkFontSize: 16px;
$linkFontColor: $white;
$linkFontWeight: 400;
$linkFontColorActive: $mainColor;
$linkFontColorHover: $mainColor;
$linkFontWeightActive: 400;
$linkBgHover: rgba($white, 0.1);

/** * BARS ICON * **/
$barsBtnColor: $white;
$activeBarsBtnColor: $mainColor;

/** * BARS MENU MOBILE * **/
$topOffsetBarsMenu: -820%;

/** * LOGO SIZE * **/
$logoHeight: 40px;
$logoHeightScrolled: 32px;
$logoHeightMobile: 40px;
$logoHeightScrolledMobile: 32px;

/** * PADDINGS * **/
$paddingNavbar: 16px;
$paddingNavBarScrolled: 12px;
$paddingNavbarMobile: 16px;
$paddingNavBarScrolledMobile: 12px;

/** * OFFSETS * **/
$navbarOffset: 77px;
$navbarOffsetMobile: 72px;
$navbarOffsetMobileScrolled: 56px;


nav {
    padding: $paddingNavbar 0;
    box-shadow: $navShadow;
    transition: all .2s;
    background-color: $navBgColor;
    border-bottom: $navbarBorderBottom;

    @if($fixed ==true) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    @media #{$ipad} {
        padding: $paddingNavbarMobile 0;
    }

    .main-container {
        display: flex;
        justify-content: space-between;
        align-items: center;

        @if($balloon ==true) {
            background-color: $balloonBg;
            padding: $balloonPadding;
            border-radius: $balloonRadius;
            box-shadow: $balloonShadow;

            @media #{$ipad} {
                padding: $balloonPaddingMobile;
            }
        }

        .brand-logo {
            flex-shrink: 0;
            z-index: 2;
            transition: all .2s;
            height: $logoHeight;

            @media #{$ipad} {
                height: $logoHeightMobile;
            }

            img {
                transition: all .2s;
            }
        }

        .nav-menu {
            display: flex;
            justify-content: center;
            align-items: center;

            @if $centered ==true {
                width: 100%;
            }

            @media #{$ipad} {
                position: absolute;
                top: $topOffsetBarsMenu;
                left: 0;
                width: 100%;
                flex-direction: column;
                padding: 40px 16px;
                transition: all .2s;
                z-index: 1;
                background-color: $menuMobileBG;

                @if($balloon ==true) {
                    width: calc(100% - 2rem);
                    left: 1rem;
                    border-radius: $balloonMenuRadiusMobile;
                    box-shadow: $balloonShadow;
                }
            }


            .nav-links {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 16px;
                gap: 16px;
                font-family: $linkFont;

                a:not(.main-button) {
                    display: block;
                    text-align: center;
                    padding: 12px 1rem;
                    border-radius: 8px;
                    transition: all .2s;
                    color: $linkFontColor;
                    font-weight: $linkFontWeight;
                    font-size: $linkFontSize;

                    &:hover {
                        background-color: $linkBgHover;
                        color: $linkFontColorHover;
                    }

                    @media #{$ipad} {
                        font-size: 20px;
                    }

                    &.active {
                        color: $linkFontColorActive;
                        font-weight: $linkFontWeightActive;
                    }
                }

                @media #{$ipad} {
                    margin-right: 0;
                    margin-bottom: 32px;
                    flex-direction: column;
                }
            }

            @if $centered ==true {
                .nav-links {
                    margin-right: 0;
                    margin: 0 auto;
                }
            }
        }
    }

    .bars-button {
        display: none;
        z-index: 2;
        font-size: 32px;
        color: $barsBtnColor;

        @media #{$ipad} {
            display: block;
        }
    }

    &.show-menu {
        @media #{$ipad} {
            background-color: $navBgColor;

            .nav-menu {
                top: $navbarOffsetMobile;
            }

            .bars-button {
                color: $activeBarsBtnColor;
            }
        }
    }
}

nav {
    transition: all .2s;

    &.scrolled {
        background-color: $navBgColorScrolled;
        padding: $paddingNavBarScrolled 0;

        @if($scrolledBlur ==true) {
            backdrop-filter: blur(5px);
        }

        @media #{$ipad} {
            padding: $paddingNavBarScrolledMobile 0;
        }

        .brand-logo {
            height: $logoHeightScrolled;

            @media #{$ipad} {
                height: $logoHeightScrolledMobile;
            }
        }

        &.show-menu {
            .nav-menu {
                top: $navbarOffsetMobileScrolled;
            }
        }
    }
}