/* *****************************************************************************
*
*  Navigation Header
*
* ***************************************************************************** */

@import './top-bar';

.bf-header {

    &__nav {
        display: grid;
        grid-template-columns: min-content max-content auto;
        background-color: var(--bf-color-bg-ground);
    }

    &__logo {
        @include media-breakpoint-down(md) {
            grid-column: 2;
        }

        @include media-breakpoint-down(sm) {
            .bf-logo svg {
                width: auto;
                height: 3rem;
            }
        }
    }

    &__nav-main {
        z-index: 25;

        @include media-breakpoint-down(md) {
            grid-column: 1/4;
            grid-row: 2;
        }
    }

    &__search-bar {
        width: 100%;
        max-width: 17rem;
        background-color: var(--bf-color-bg-ground);

        @include media-breakpoint-down(sm) {
            position: absolute;
            width: calc(100% - 4.5rem);
            max-width: none;
            @include transitions(all .2s ease-out);
            opacity: 0;

            &.show {
                display: block !important;
                opacity: 1 !important;
            }
        }
    }

    .nav-item {
        padding-left: 1rem;
        padding-right: 1rem;
        color: var(--bf-color-neutral-primary);

        @include media-breakpoint-down(md) {
            min-height: 2rem;
            flex: 1;
            padding-left: 0;
            padding-right: 0;
            border: 1px solid var(--bf-color-stroke-secondary);
            border-right: none;
            border-bottom: none;

            &:first-child {
                border-left: none;
            }
        }

        .nav-link {
            position: relative;
            padding: 1rem 0;
            background: none;
            width: auto;
            border: none;
            // color: var(--bf-color-neutral-primary);
            font-family: $font-family-secondary;
            font-size: 1.25rem;
            font-weight: 400;
            line-height: inherit;
            // text-transform: uppercase;
            letter-spacing: 1px;

            @include media-breakpoint-down(md) {
                width: 100%;
                justify-content: center;
                padding: .5rem 1rem;
            }

            @include media-breakpoint-down(sm) {
                padding: .25rem;
                font-size: 1rem;
            }
            
            @include media-breakpoint-up(lg) {
                &:before {
                    content: '';
                    @include transitions(transform .2s ease-out);
                    position: absolute;
                    bottom: 0;
                    top: auto;
                    left: 0;
                    transform: scaleX(0);
                    transform-origin: center left;
                    width: 100%;
                    height: 3px;
                    background-color: var(--bf-color-neutral-primary);

                    &:hover,
                    &:focus {
                        transform: scaleX(1);
                    }
                }
            }
        }
    }

    .bf-megamenu {

        &__nav-item.open {

            .nav-link {
                &:before {
                    transform: scaleX(1);
                }

                .bf-icon {
                    transform: rotate(180deg);
                }
            }

            .bf-megamenu__panel {
                @include transitions(opacity $transition-time-medium);
                pointer-events: auto;
                opacity: 1;
                transition-delay: 0.2s;
            }
        }

        &__panel {
            position: absolute!important;
            right: 0;
            float: none;
            display: block;
            width: 100vw;
            margin: 1px 0 0 0;
            font-size: .75rem;
            background-color: var(--bf-color-bg-ground);
            @include transitions(opacity $transition-time-base);
            transition-delay: 0s;
            opacity: 0;
            pointer-events: none;

            .btn-close {
                position: fixed;
                left: auto;
                right: 0;
            }
            
            @include media-breakpoint-down(md) {
                > div,
                .tab-content {
                    width: 100%;
                    height: calc(100vh - 120px);
                    overflow-y: auto;
                    overflow-x: hidden;
                }
            }

            hr {
                border-top: 1px solid var(--bf-color-stroke-secondary);
            }
        }
    }


    .bf-tabs {
        min-width: 15rem;
        max-width: 15rem;
        background-color: var(--bf-color-bg-underground);

        @include media-breakpoint-down(md) {
            min-width: 4rem;
        }
    
        &__tab {
            position: relative;
            font-family: $font-family-secondary;
            background-color: var(--bf-color-bg-underground);
            
            &:hover,
            &:focus {
                background-color: var(--bf-color-bg-ground);
                outline: none;
            }

            &.active {
                font-weight: 700;
                background-color: var(--bf-color-bg-ground);

                &:before {
                    transform: translate(0);
                }
            }

            &:not(:last-of-type) {
                border-bottom: 1px solid var(--bf-color-stroke-secondary);
            }
            
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 3px;
                height: 100%;
                transform: translate(-100%);
                transition-duration: .2s;
                background-color: var(--bf-color-bg-action-primary);
            }

            span {
                font-size: 1.125rem;
                line-height: 1.25rem;
            }
        }

    }

    button {
        color: inherit; // Override browser default
    }
}