.navbar {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    position: fixed;
    background-color: transparent;
    transition: all ease-out 150ms;

    &.fixed {
        background-color: $white;
    }

    .cms_editmode & {
        position: relative;
    }

    &-brand {
       height: 3.5rem;
       transition: height ease-out 150ms;
    }

    &-brand img {
        width: auto;
        height: 100%;
        display: block;
    }

    &-nav {
        margin-left: auto;
        align-items: flex-end;
    }

    &-extra a {
        color: $secondary;
        text-transform: uppercase;
    }

    .nav li > .nav-link,
    .navbar-extra li > a {
        display: block;
        font-weight: $font-weight-bold;
        transition: color ease-out 100ms;
        padding: map-get($spacers, 2) map-get($spacers, 1) * 3;

        border: {
            width: 1px;
            style: solid;
            radius: 10rem;
            color: transparent;
        }

        &.active,
        &:hover {
            color: $secondary;
            text-decoration: none;
        }


    }
}

.navbar-nav-item.submenu {
    position: relative;

    &:hover {
        > a {
            border-radius: 0 !important;
            background-color: rgba(255, 255, 255, .9);
        }
    }

    .nav-item-submenu {
        display: none;
        background-color: rgba(255, 255, 255, .95);
        padding-bottom: map-get($spacers, 3);

        > ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        > ul > li {
            margin: 0;
        }

        a {
            font-size: 0.8em;
            text-align: left;
            font-weight: normal;
        }
    }
}



@include media-breakpoint-up(lg) {
    .navbar {
        &.fixed {
            box-shadow: 0 0 10px rgba(black, .3);

            padding: {
                top: .5rem;
                bottom: .5rem;
            }
        }

        &.fixed &-brand {
            height: 3rem;
        }

        &-toggle {
            display: none;
        }

        &-menu {
            position: relative;
        }

        &-extra {
            top: 0;
            right: $spacer;
            position: absolute;
            flex-wrap: nowrap;
        }

        &-extra.nav li:not(:first-child) {
            position: relative;
            display: flex;

            &::before {
                content: '/';
                margin: {
                  left: .2rem;
                  right: .2rem;
                }
                display: inline-block;
                font-size: 0.6rem;
                color: $secondary;
            }
        }

        &-extra.nav li > a {
            padding: 0;
            font-size: 0.6rem;
        }

        &-nav > li:last-child a {
            padding-right: 0 !important;
        }

        .nav li:not(:first-child) {
            //margin-left: map-get($spacers, 3);
        }

        .nav li > a {
            text-align: center;

            small {
                display: block;
            }
        }

        .nav li a.featured {
            border-color: $secondary;
            background-color: rgba(white, .3);

            small {
                color: $secondary;
            }
        }
    }

    .navbar-nav-item.submenu {
        &:hover {
            .nav-item-submenu {
                display: block;
            }
        }

        > a {
            z-index: 9;
            position: relative;
        }

        .nav-item-submenu {
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 8;
            padding-top: 3rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }
    }
}

@include media-breakpoint-down(md) {
    .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
        //background-color: $white;

        &-brand {
            height: 3rem;
        }

        &-menu {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            position: fixed;
            background-color: $white;
            transform: translateX(100%);
            padding-top: map-get($spacers, 6);
            transition: transform ease-in-out 150ms;
        }

        .cms_editmode &-menu {
            position: relative;
            transform: translateX(0);
        }

        &-menu .container {
            position: relative;
        }

        .nav {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .nav li {
            margin: 0;
            width: 100%;
            max-width: 25rem;
        }

        .nav li:not(:last-child) {
            border-bottom: 1px solid $secondary;
        }

        .nav li > a {
            small {
                display: none;
            }
        }

        &-extra li:first-child {
            border-top: 1px solid $secondary;
        }

        &-extra a {
            text-transform: capitalize;
        }

        &-toggle {
            border: 0;
            padding: 0;
            width: 40px;
            height: 24px;
            z-index: 99999;
            background: none;
            position: relative;
            display: inline-block;

            outline: none !important;
        }

        &-toggle-icon {
            position: relative;
            transition-duration: .22s;
            transition-property: transform;
            transition-timing-function: (.55,.055,.675,.19);

            // transition-duration: .22s;
            // transition-timing-function: cubic-bezier(.55,.055,.675,.19);

            &::after,
            &::before {
                content: ' ';
            }

            &,
            &::after,
            &::before {
                left: 0;
                width: 40px;
                height: 4px;
                border-radius: 4px;
                position: absolute;
                background-color: $primary;
                transition: transform ease .15s;
            }

            & {
                top: 50%;
                display: block;
                margin-top: -2px;
            }

            &::after {
                bottom: -10px;
                transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19);
            }

            &::before {
                top: -10px;
                transition: top .1s ease-in .25s,opacity .1s ease-in;
            }
        }

        &-toggle {
            &.open &-icon {
                transform: rotate(225deg);
            }

            &.open &-icon::before {
                top: 0;
                opacity: 0;
                transition: top .1s ease-out,opacity .1s ease-out .12s;
            }

            &.open &-icon::after {
                bottom: 0;
                transform: rotate(-90deg);
                transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
            }
        }

        // &-toggler-close {
        //     top: 5px;
        //     right: 5px;
        //     z-index: 99;
        //     position: absolute;
        // }


        &-menu.open {
            transform: translateX(0);
        }
    }

    .navbar-menu {
        padding-bottom: 40px;

        > .container {
            height: 100%;
            display: block;
            overflow-y: auto;
        }
    }

    .navbar-nav {
        .submenu {
            position: relative;
            padding-right: 50px;

            &::after,
            &::before {
                top: 19px;
                width: 10px;
                height: 2px;
                content: ' ';
                display: block;
                position: absolute;
                background-color: $primary;
                transition: all ease-in-out 150ms;
            }

            &::before {
                transform: rotate(45deg);
            }

            &::after {
                transform: rotate(-45deg);
            }
        }

        .submenu > a {
            position: relative;
        }

        .submenu.open {
            &::before {
                transform: rotate(-45deg);
            }

            &::after {
                transform: rotate(45deg);
            }

            .nav-item-submenu {
                display: block;
                margin-bottom: 0;
                position: relative;
            }

            .navbar-nav-item {
                border-bottom: 0;
            }
        }
    }
}