// Base styles for navbar light theme
@mixin light-theme-navbar {
    .navbar,
    &.navbar {
        background: $light;

        * {
            color: $dark;
        }

        // Base nav items hover effect
        .navbar-menu .nav-item:hover,
        .navbar-menu .nav-item .nav-link:hover,
        .navbar-brand:hover {
            color: generate-shade($dark, 30, "lighten");

            .btn-arrow::after, .btn-arrow::before {
                background-color: generate-shade($dark, 30, "lighten") !important;
            }
        }

        // Navbar toggle line styles
        .navbar-toggle .navbar-toggle-line {
            background-color: $dark;
        }

        // Styles for the navbar collapse
        .navbar-collapse {
            background-color: $light;
        }
    }
}

// Base dark theme mode styles for navbar
@mixin dark-theme-navbar {
    .navbar,
    &.navbar {
        background: $dark;

        * {
            color: $light;
        }

        // Base nav items hover effect
        .navbar-menu .nav-item:hover,
        .navbar-menu .nav-item .nav-link:hover,
        .navbar-brand:hover {
            color: generate-shade($light, 20, "darken");

            .btn-arrow::after, .btn-arrow::before {
                background-color: generate-shade($light, 20, "darken") !important;
            }
        }

        // Navbar toggle line styles
        .navbar-toggle .navbar-toggle-line {
            background-color: $light;
        }

        // Btn arrow button
        .btn-arrow {
            &::before, &::after {
                background-color: $light;
            }
        }

        // Styles for the navbar collapse
        .navbar-collapse {
            background-color: $dark;
        }
    }
}


.navbar {
    position: relative;
    z-index: 10;
    width: 100%;
    height: $navbar-height;

    display: flex;
    justify-content: space-between;
    align-items: center;

    transition: color $base-transition-time ease;

    padding: $base-padding $base-padding*2;

    // Apply light theme as a default theme
    @include light-theme-navbar;

    & > * {
        z-index: 15;
    }

    // Navbar main link (it could be logo)
    .navbar-brand {
        transition: all $base-transition-time ease;
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
    }

    // Menu list
    .navbar-menu {
        display: flex;
        align-items: center;
        margin: 0 $base-margin;

        // Menu item (e.g. link, button)
        .nav-item .nav-link,
        .dropdown .dropdown-toggle {
            transition: all $base-transition-time ease;
            font-size: $nav-link;
            opacity: 0.9;
        }

        .nav-item,
        .dropdown .dropdown-toggle {
            margin: 0 $base-margin;
        }

        // Navbar dropdown
        .dropdown .dropdown-toggle {
            padding: 0;
            margin: 0;
        }
    }

    // Input groupt styles
    .input-group {
        height: 40px;

        * {
            height: 100%;
        }

        .btn {
            display: flex;
            align-items: center;
        }
    }

    div {
        display: flex;
        align-items: center;
    }

    // Styles for the navbar toggle bytton
    .navbar-toggle {
        position: relative;
        cursor: pointer;
        width: 25px;
        height: 18px;

        // Navbar toggle line styles
        .navbar-toggle-line {
            position: absolute;
            left: 0;
            top: 0;

            transition: all $base-transition-time ease;
            width: 100%;
            height: 2px;

            // Make the second line stick to the center
            &:nth-child(2) {
                top: 50%;
                translate: 0 -50%;
            }

            // Make the last line stick to the bottom
            &:last-child {
                top: auto;
                bottom: 0;
            }
        }

        // Styles for the active navbar toggle button
        &.active {
            .navbar-toggle-line {
                width: 100% !important;
                top: 50%;
                bottom: auto;

                &:first-child {
                    transform: translateY(-50%) rotate(-45deg);
                }
                &:nth-child(2) {
                    display: none;
                }
                &:last-child {
                    transform: translateY(-50%) rotate(45deg);
                }

            }
        }
    }

    // Styles for the navbar collapse
    .navbar-collapse {
        position: absolute;
        z-index: 5 !important;
        top: $navbar-height !important;
        min-width: 300px;
        padding: 0 $base-padding * 2 $base-padding * 2 $base-padding * 2;
        transition: all $base-transition-time ease;

        // Hide it  by default
        right: -100%;

        // Show it when it contains the 'collapsed' class
        &.collapsed {
            right: 0;
        }

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;


        // Menu list
        .navbar-collapse-menu {
            display: flex;
            flex-direction: column;
            align-items: start;
            width: 100%;

            // Nav item styles
            .nav-item {
                margin: $base-margin 0;
            }
        }


        // Input group styles for the navbar-collapse
        .input-group {
            width: 100%;

            & > * {
                width: 100%;
            }

            button, .btn {
                width: auto;
            }
        }

        // Navbar position styles
        &.navbar-collapse-right {
            left: auto;
            right: -100%;

            // Show it when it contains the 'collapsed' class
            &.collapsed {
                right: 0;
            }
        }

        &.navbar-collapse-left {
            right: auto;
            left: -100%;

            // Show it when it contains the 'collapsed' class
            &.collapsed {
                left: 0;
            }
        }

        &.navbar-collapse-full {
            width: 100%;
            right: auto;
            left: 0;
            top: -100vh !important;

            // Show it when it contains the 'collapsed' class
            &.collapsed {
                top: $navbar-height !important;
                left: 0;
                right: auto;
            }
        }
    }

    // Styles for the sticky navbar
    &.navbar-sticky {
        position: sticky;
        top: 0;

        .navbar-collapse {
            position: fixed;
            height: calc(100vh - #{$navbar-height}) !important;
            overflow-x: scroll;
        }
    }
}


// Apply styles for different themes
body[data-theme="dark"] {
    @include dark-theme-navbar;
}

body[data-theme="light"] {
    @include light-theme-navbar;
}

.navbar[data-theme="dark"] {
    @include dark-theme-navbar;
}

.navbar[data-theme="light"] {
    @include light-theme-navbar;
}