/** UI Components – Navbar **/ .navbar{

position:fixed;
top:0;
right:0;
left:0;
z-index:9999;
background:transparent;
@include transition(.25s ease-in-out);
&__container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    min-height:92px;
    padding-top:24px;
    padding-bottom:24px;
    @include transition(.25s ease-in-out);
    @include media-min($lg){
        flex-wrap:nowrap;
        min-height:126px;
        padding-top:0;
        padding-bottom:0;
    }
}
&__brand{
    @include media-max($lg){
        order:1;
    }
}
&__logo{
    display:block;
    height:44px;
    @include media-min($sm){
        height:54px;
    }
    &--yellow{
        display:none;
        height:44px;
        @include media-min($sm){
            height:54px;
        }
    }
    &--dark{
        display:none;
        height:44px;
        @include media-min($sm){
            height:54px;
        }
    }
}
&__toggler{
    position:relative;
    display:inline-block;
    height:24px;
    margin-left:32px;
    padding:0px;
    background:transparent;
    border:0px;
    border-radius:0px;
    outline: 0;
    @include media-max($lg){
        order:3;
    }
    @include media-min($lg){
        display:none;
    }
    span{
        position: relative;
        left: 0;
        display: block;
        width: 24px;
        height: 3px;
        margin-top: 4px;
        margin-bottom: 4px;
        background-color: $yellow;
        border-radius:0px;
        transform: rotate(0deg);
        opacity: 1;
    }
    span:nth-child(1),
    span:nth-child(3) {
        transition: transform .5s ease-in-out;
    }
    &--open span:nth-child(1) {
        position: absolute;
        top: 6px;
        left: 0;
        background-color: $white;
        transform: rotate(135deg);
        opacity: 1;
    }
    &--open span:nth-child(2) {
        height: 2px;
        background-color: transparent;
        visibility: hidden;
    }
    &--open span:nth-child(3) {
        position: absolute;
        top: 6px;
        left: 0;
        background-color: $white;
        transform: rotate(-135deg);
        opacity: 1;
    }
}
&__nav{
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:calc(100vh - 92px);
    padding:0;
    list-style-type:none;
    @include media-max($lg){
        order:4;
    }
    @include media-min($lg){
        display:flex;
        flex-direction:row;
        justify-content:flex-end;
        min-height:0;
        margin:0 0 0 auto;
    }
    &-item{
        position:relative;
        margin:18px 0;
        line-height:135%;
        @include media-min($lg){
            margin:0 24px;
        }
        @include media-min($xxl){
            margin:0 36px;
        }
        &:last-of-type{
            @include media-min($lg){
                margin-right:0;
            }
        }
    }
    &-link{
        color:$white;
        font-weight:600;
        font-size:1.25em;
        font-family:$mainFont;
        text-decoration:none;
        @include media-min($lg){
            color:$black;
            font-size:1em;
        }
        &--dropdown::after{
            display:inline-block;
            color:rgba($black,.24);
            vertical-align:middle;
            transform:rotate(0deg);
            content:"arrow_drop_down";
            @include transition(.25s ease-in-out);
            @include material-icons(24px);
            @include media-min($lg){
                color:$yellow;
            }
        }
        &--dropdown-open::after{
            transform:rotate(-180deg);
        }
    }
    &-item--active &-link{
        color:$black;
        @include media-min($lg){
            color:$yellow;
        }
    }
    &-dropdown{
        display:none;
        padding:12px 0 0 0;
        list-style-type:none;
        @include media-min($lg){
            position:absolute;
            top:48px;
            left:-24px;
            min-width:220px;
            padding:12px 24px 16px 24px;
            background:$yellow;
        }
        &-item{
            margin:12px 0;
            line-height:135%;
            text-align:center;
            @include media-min($lg){
                margin:10px 0;
                text-align:left;
            }
        }
        &-link{
            color:$black;
            font-weight:600;
            font-size:1.25em;
            font-family:$mainFont;
            text-decoration:none;
            @include media-min($lg){
                color:$white;
                font-size:1em;
            }
        }
        &::before{
            position:absolute;
            top:-5px;
            left:48px;
            display:none;
            border-color: transparent transparent $yellow transparent;
            border-style: solid;
            border-width: 0 5px 5px 5px;
            content:"";
            @include media-min($lg){
                display:inline-block;
            }
        }
    }
    &-btn{
        display:inline-block;
        padding:18px 32px 18px 36px;
        color:$white;
        font-weight:600;
        font-size:1.25em;
        font-family:$mainFont;
        text-decoration:none;
        background:$black;
        border:1px solid $black;
        @include media-min($lg){
            padding:14px 24px 14px 30px;
            font-size:1em;
            background:$yellow;
            border:1px solid $yellow;
        }
        @include transition(.35s ease-in-out);
        &::after{
            display:inline-block;
            margin:0 0 0 2px;
            vertical-align:-4px;
            content:"arrow_right";
            @include material-icons(24px);
        }
        &:hover, &:focus{
            color:$white;
            background-color:$blue;
            border-color:$blue;
        }
    }
}
/** States **/
&--open{
    background:$yellow;
}
&--open &__logo{
    display:none;
}
&--open &__logo--yellow{
    display:block;
}
&--scroll:not(.navbar--open){
    background:$white;
    box-shadow:0px 3px 9px rgba($black,.12);
}
&--scroll &__container{
    @include media-min($lg){
        min-height:96px;
    }
}
/** Dark-light mode switch **/
&__switch{
    position:relative;
    min-width:36px;
    height:12px;
    margin-left:auto;
    padding:0;
    border:0;
    border-radius:30px;
    outline:none;
    cursor:pointer;
    @include transition(background-color .25s ease-in-out);
    @include media-max($lg){
        order:2;
    }
    @include media-min($lg){
        margin-left:54px;
    }
    &::before{
        position:absolute;
        top:-9px;
        left:0;
        padding:6px;
        border-radius:50%;
        box-shadow:0px 1px 2px rgba($black,.24);
        @include material-icons(18px);
        @include transition(transform .25s ease-in-out);
    }
    &--light{
        background-color:rgba($black,.06);
    }
    &--light::before{
        color:$yellow;
        background-color:$white;
        transform:translateX(-15px);
        content:"light_mode";
    }
    &--dark{
        background-color:rgba($white,.18);
    }
    &--dark::before{
        color:$white;
        background-color:$darkGrey;
        transform:translateX(21px);
        content:"dark_mode";
    }
}

}

/** Dark mode styles **/ body.dark-mode .navbar{

&__logo{
    display:none;
}
&__logo--dark{
    display:block;
}
&__nav{
    &-link{
        @include media-max($lg){
            color:$white;
        }
    }
}
&--scroll:not(.navbar--open){
    background:$darkBg;
    box-shadow:0px 3px 9px rgba($black,.12);
}
&--open .navbar__logo--dark{
    display:none;
}

}