@import 'app/styles/layout';

.branded-nav-wrapper {
    .branded-nav {
        z-index: 998;
    }

    :global(.navbar) {
        box-shadow: 2px 1px 4px rgba(82, 81, 81, 0.7);
    }

    .navbar-toggle {
        position: relative;
        float: right;
        padding: 9px 10px;
        margin-right: 15px;
        margin-top: 8px;
        margin-bottom: 8px;
        background-color: transparent;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: $color-text-white;
    }

    .navbar-toggle:hover {
        background-color: $color-bg-black;
    }

    :global(.navbar-collapse) {
        border-top-color: transparent;
    }
    /* stylelint-disable */
    #navbarScope {
        :global(.secondary-nav-dropdown) {
            a {
                color: $color-text-white;
            }
        }

        :global(.btn-success) {
            color: $color-text-white;
        }
    }
    /* stylelint-enable */
}

.nav-wrapper {
    @include clamp-width;
    display: flex;
}

.navbar-image {
    float: left;
    clear: both;
    text-align: center;
    height: 48px;
    width: 48px;
    display: block;
    transform: translateY(-12px);
    margin-right: 16px;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    background-repeat: no-repeat;
    // Preprints uses the brand's navbar logo
    // Collections uses the theme-styles component and will overwrite this
    background-image: var(--navbar-logo-img-url);
}

.NavBarBuffer {
    height: 50px;
}

.dropdown-links {
    margin-right: 30px;
}

// The default 340px isn't quite enough for the auth dropdown
.secondary-navigation {
    max-height: 400px !important;
    margin-right: 0 !important;
}

@media (min-width: 992px) {
    .secondary-navigation {
        /* necessary for the parent flexbox container to shrink smaller than the child element's text */
        min-width: 0;
        margin-left: auto !important;
        display: flex;
    }

    .links > li > a {
        line-height: 27px !important;
    }
}

@media (max-width: 991px) {
    .links > li > a:hover {
        background-color: #263947;
    }

    .secondary-navigation {
        min-width: 210px;
        position: absolute;
        right: 0;
    }
}

// preprint-branded navbar uses brand relationship and not custom CSS
// Extra specificity needed to override the default styles set in app/styles/_components.scss
// branded-navbar dark/light text only used for preprint providers, as collection providers currently use custom CSS
.preprint-branded-navbar.preprint-branded-navbar {
    background-color: var(--primary-color);
    background-image: none;
    color: $color-text-white;

    .secondary-navigation {
        border-color: transparent;
    }

    // Dark text only applied to provider name, hamburger menu (only shows up in mobile), and navbar links in desktop view
    &.dark-text {
        a:global(.navbar-brand),
        .navbar-toggle {
            color: $color-text-black !important;
        }

        /* stylelint-disable */
        .desktop {
            a:not(:global(.btn-top-signup)),
            :global(.secondary-nav-dropdown) {
                color: $color-text-black !important;
            }
        }
        /* stylelint-enable */
    }
}

.white-background-branded-navbar {
    background-color: #fff !important;
}
