header { position: sticky; top: 0; z-index: 100; width: 100%;
    .header__top { padding-block: 12px; }
    .header__main { background-color: #fff; }
    .site-logo { display: inline-flex; align-items: center; width: 8.75rem;
        img {  width: 100%; height: auto; }
    }
    
    
    &.header--auth {
        .container { display: flex; justify-content: space-between; align-items: center; }  
    }
    &.header--app { border-bottom: 1px solid var(--bs-border-color);
        .site-logo { width: 7.813rem; }

    }
}




/*** ---------- Navbar ---------- ***/
.navbar { --bs-navbar-padding-y: 1rem;
    .container-fluid { column-gap: 1rem; align-items: stretch; }
    .navbar-nav { --bs-nav-link-font-size: 0.875rem;
        .nav-item {
            .nav-link { font-weight: 600;
                &.active { color: var(--clr-success); box-shadow: inset 0 -.2rem 0 0 var(--clr-success); }
            }
            
            .dropdown-toggle { cursor: pointer; }
        }
    }

    .navbar-toggler { width: 2.375rem; height: 2.375rem; padding: 0;
        .navbar-toggler-icon { width: 1.25em; height: 1.25em; }
        &:focus { box-shadow: none; }
    }
}

@media(max-width: 991.98px) {
    .navbar {
        .navbar-collapse { position: absolute; left: 0; top: 100%; right: 0; background-color: #fff; border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); }
        .navbar-nav { padding: 1rem 0; 
            + .navbar-nav { padding-top: 0; }

            .nav-item {
                .nav-link { padding: 0.5rem 1rem;
                    &.active { box-shadow: inset .2rem 0 0 0 var(--clr-success); }
                }

                .user { padding: 0.5rem 1rem; }

                .dropdown-menu { border: none; border-radius: 0; border-left: 1px solid var(--bs-border-color); margin: 0; padding: 0; }
            }
        }
    }
}

@media(min-width: 992px) {
    .navbar { --bs-navbar-padding-y: 0;
        .navbar-collapse { column-gap: 1rem; }
        .navbar-nav { height: 100%;
            > .nav-item {
                > .nav-link { padding: 1.25rem .5rem; }

                &.nav-item--user { display: inline-flex; align-items: center; }  
                &.dropdown { 
                    .dropdown-toggle::after { display: none; }

                    &:hover .dropdown-menu { opacity: 1; pointer-events: all; }
                }
            }

            .dropdown-menu { padding: 0; border: 1px solid var(--bs-border-color); border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);  margin-top: 0px; top: 100%; display: block; opacity: 0; pointer-events: none; transition: opacity var(--transition-duration) var(--transition-timing-function); 
                &.dropdown-menu--right { right: 0; left: auto; }

                .nav-link { padding: .5rem 1rem; }
            }
        }
    }
}

@media(min-width: 1200px) {
    .navbar {
        .navbar-nav { 
            > .nav-item {
                > .nav-link { padding: 1.25rem .75rem; }
            }
        }
    }
}

@media(min-width: 1400px) {
    .navbar {
        .container-fluid { column-gap: 2rem; }
    }
}


/* .navbar .nav-item.dropdown { display: grid; grid-template-columns: 1fr auto; }
.navbar .nav-item .dropdown-toggle { cursor: pointer; display: grid; place-items: center; min-width: 40px; height: 100%; }
.navbar .nav-item .dropdown-toggle::after { display: none; }
.navbar .nav-item.dropdown .dropdown-menu { grid-column: span 2; padding: 8px; border-top-left-radius: 0; border-top-right-radius: 0; border: none; }
.navbar .nav-item.dropdown .dropdown-item { border-radius: var(--bs-border-radius); }

@media(min-width: 992px) {
    .navbar .nav-item .nav-link { --bs-nav-link-padding-y: 1rem; }
    .navbar .nav-item .dropdown-menu .nav-link { --bs-nav-link-padding-y: .5rem; }
    .navbar .nav-item .dropdown-toggle { justify-content: start; min-width: 0; padding-right: .5rem; }
    .navbar .nav-item.dropdown .dropdown-menu { margin-top: 0px; top: 100%; }
    .navbar .nav-item.dropdown .dropdown-menu { display: block; opacity: 0; pointer-events: none; transition: opacity var(--transition-duration) var(--transition-timing-function); }
    .navbar .nav-item.dropdown:hover .dropdown-menu { opacity: 1; pointer-events: all; }
} */