@import '../../helpers/_selectors';
@import '../../helpers/_size.scss';
@import './theme.scss';

@mixin mobile-dropdown-menu-show {
    border-radius: 0;
    box-shadow: none;
    display: block;
    position: relative;
    top: 1rem;
    float: none;
    border: none;
    background-color: transparent;
    margin-bottom: 1rem;
}

/* These styles can also be used on menus in the body */
@mixin nav-bar-position($position) {
    -webkit-box-align: stretch;
    -ms-grid-row-align: stretch;
    align-items: stretch;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: flex;

    -webkit-box-pack: #{$position};
    -ms-flex-pack: #{$position};
    justify-content: flex-#{$position};
    white-space: nowrap;
}

/* HEADER */
.header {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    width: 100%;
    z-index: 100;
    margin-bottom: 20px;
    box-shadow: 0 3px 15px rgba(57, 63, 72, 0.1);
    background-color: var(--cirrus-bg);
    max-height: 100vh;
    padding: 0 2rem;
    transition: all 0.3s;
    display: flex;
    --header-link-color: #{map-get($grays, '700')};
    --header-link-color-hover: #{lighten(map-get($grays, '700'), 10)};

    /* Remove any padding set for headers in default.scss */
    @for $i from 1 through 6 {
        h#{$i} {
            margin: 0;
        }
    }

    a {
        color: var(--header-link-color);

        &:hover {
            color: var(--header-link-color-hover);
        }
    }

    /* Header dark theme */
    &.header-dark {
        background-color: rgba(0, 0, 0, 0.87);
        color: #fff;
        --header-link-color: #fff;
        --header-link-color-hover: #fff;

        /* Theme for dark menu */
        // .nav-item a {
        //     color: #fff;
        // }
    }

    &.header-clear {
        background-color: transparent;
        box-shadow: none;

        /* Add border radius to whole menu with clear header */
        .nav-item .dropdown-menu {
            border-radius: 4px;
        }
    }

    /* Add transition to nav menu when it drops down */
    &.header-animated .header-nav {
        transition: all 0.3s;
    }

    /* The container that contains all the header menu components. Child of header */
    .header-nav {
        /* Flex display 768px and higher */
        overflow: auto;
    }

    .header-brand {
        -webkit-overflow-scrolling: touch;
        -webkit-box-align: stretch;
        align-items: stretch;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        max-width: 100vw;
        min-height: 3.25rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Static header at the top of the screen */
    &.header-fixed {
        position: fixed;
        top: 0; /* Change this if you want to float the header somewhere else */
    }

    /* Hover effect for header elements when appropriate */
    &:not(.header-clear) .nav-item:not(.no-hover):hover,
    &:not(.header-clear) .nav-item:not(.no-hover).hovered {
        background-color: rgba(216, 216, 216, 0.15);
        transition: all 0.3s;
    }

    &:not(.header-clear) .nav-item.active, /* active:hover removes the transition effect when hovering over the dropdown menu */ 
    &:not(.header-clear) .nav-item.active:hover {
        background-color: rgba(216, 216, 216, 0.35);
    }

    .nav-btn {
        cursor: pointer;
        display: block;
        height: 3.5rem;
        position: relative;
        width: 3.5rem;
    }

    #{$button-selectors} {
        margin: 0;
    }
}

/* Styles for header menu (aka the nav bar) */
.nav-menu {
    transition: all 0.3s;

    .has-sub {
        position: relative;
    }
}

/* Allow the user to scroll through navbar items if it exceeds nav-left, nav-center, or nav-right widths */
.nav-overflow-x {
    -webkit-box-pack: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    overflow-x: scroll;
}

/* Wrapper to vertically center header items */
.nav-item {
    -webkit-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0 0.3rem;
    cursor: pointer;

    a {
        align-items: center;
        display: flex;
    }

    /* HEADER DROP DOWN MENU */
    .dropdown-menu {
        background-color: var(--cirrus-bg);
        position: absolute;
        top: 95%;
        /*right: 0; /* Unable to solve problem when we have multiple drop down menus */
        z-index: 1000;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        font-size: 14px;
        text-align: left;
        list-style: none;
        background-clip: padding-box;
        border: 1px solid map-get($grays, '200');
        border-radius: 0 0 4px 4px;
        box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1);

        /* Just add a transition in general */
        &.dropdown-animated {
            transition: all var(--animation-duration);
        }

        & > li > a {
            display: block;
            padding: 0.5rem 1rem;
            clear: both;
            line-height: 1.42857143;
            white-space: nowrap;
        }

        & > li {
            margin: 0;
            transition: all 0.3s;
        }

        & > li:hover {
            transition: all 0.3s;
            background-color: rgba(216, 216, 216, 0.15);
        }

        & > li:active {
            transition: all 0.3s;
            background-color: rgba(216, 216, 216, 0.25);
        }

        & > li:last-child {
            margin-bottom: 0;
        }

        .dropdown-menu-divider {
            border: none;
            background-color: rgba(216, 216, 216, 0.15);
            height: 1px;
            margin: 0.5rem 0;
        }
    }

    /* Add room for the dropdown chevron pseudoelement */
    &.has-sub .nav-dropdown-link {
        padding-right: 2.5rem;
        position: relative; /* Needed for hiding glyphs in mobile header */

        /* Dropdown menu location adjustment located below for sizes above phones */
        /* Dropdown menu indicator */
        &::after {
            border: 2px solid var(--cirrus-primary); /* Must be first to create the triangle shape */
            border-right: 0; /* Create the triangle effect */
            border-top: 0;
            display: block;
            height: 0.5em;
            width: 0.5em;
            content: ' ';
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            pointer-events: none;
            margin-top: -0.435em;
            right: 1.125em;
            top: 50%;
            position: absolute;
        }
    }
}

/* Dark dropdown menu theme */
.nav-item .dropdown-menu.dropdown-dark,
.header.header-dark .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.87);
    border: 1px solid map-get($grays, '800');
    color: #fff;
}

.dropdown-menu.dropdown-shown,
.nav-item.active {
    opacity: 1;
}

@include screen-above('sm') {
    .header {
        -webkit-box-align: stretch; /* Box Align and align items to stretch to make nav-items fill up parent height */
        align-items: stretch;
        display: -webkit-box;
        display: -ms-flexbox;

        .header-nav {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            -ms-flex-negative: 0;
            -webkit-box-align: stretch;
            align-items: stretch; /* Make items fill up all available space regardless of width https://drafts.csswg.org/css-align/ */
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            position: relative;
            text-align: center;
            width: 100%;
            top: 0;
            overflow: visible; /* Only visible for showing dropdown menus, hidden for mobile */
        }

        /* Align items to the left */
        .nav-left {
            @include nav-bar-position('start');

            /* Align dropdown menu to the left side of the parent nav-item for header-left */
            .has-sub .dropdown-menu {
                left: 0;
                right: auto;
            }
        }

        /* Align items to the right */
        .nav-right {
            @include nav-bar-position('end');

            /* Align dropdown menu to the right side of the parent nav-item for header-right */
            .has-sub .dropdown-menu {
                left: auto;
                right: 0;
            }
        }

        /* Centering items, best used when nav-brand is not used to prevent offset */
        .nav-center {
            -webkit-box-align: stretch;
            align-items: stretch;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 0;
            -ms-flex-positive: 0;
            flex-grow: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        }

        /* Hide hamburger button */
        .nav-btn {
            display: none;
        }

        .nav-item {
            /* Expand link area for desktop views so it is easier to click */
            a {
                padding: 0.5rem 1rem;
            }

            .dropdown-menu {
                opacity: 0;
                pointer-events: none; /* Make cursor not respond to menu links when not displayed */
            }

            .dropdown-menu.dropdown-animated {
                -webkit-transform: translateY(-5px); /* Used for transitional drop down effect */
                transform: translateY(-5px);
            }

            .dropdown-menu.dropdown-shown,
            &.toggle-hover:hover .dropdown-menu,
            .dropdown-menu.dropdown-animated.dropdown-shown {
                opacity: 1;
                -webkit-transform: none; /* Used for transitional drop down effect */
                transform: none;
                pointer-events: auto;
            }
        }
    }
}

@include screen-below('sm') {
    /* Add scrolling support in header */
    .header {
        flex-direction: column;

        .header-brand .nav-item:first-child {
            padding: 0 1rem; /* Add padding to the first child, usually the logo */
        }

        /* Hide dropdown menu on mobile */
        .header-nav {
            height: 0;

            /* Show the dropdown */
            &.active {
                height: 100vh;
            }

            /* Make the menu items larger in the dropdown menu */
            .nav-item {
                padding: 1rem;
            }

            /* Get rid of extra spaces */
            .nav-item > a {
                padding: 0;
                width: 100%; /* Stretch the link to span the entire list item */
            }
        }
    }

    /* Remove flex for mobile devices */
    .nav-item.has-sub {
        display: block;

        .dropdown-menu {
            /* Hide the menu by default in mobile view (overflow on header-right can expose it) */
            display: none;

            &.dropdown-shown {
                @include mobile-dropdown-menu-show();
            }

            &.dropdown-dark {
                background-color: rgba(0, 0, 0, 0.17);
                border: 0;
            }
        }
    }

    /* Hamburger button */
    .nav-btn {
        cursor: pointer;
        display: block;
        position: relative;
        margin-left: auto;

        span {
            background-color: var(--header-link-color);
            display: block;
            height: 2px;
            left: 50%;
            margin-left: -7px;
            position: absolute;
            top: 50%;
            transition: none 86ms ease-out;
            width: 15px;

            /* Line spacing in hamburger button */
            &:nth-child(1) {
                margin-top: -6px;
            }

            &:nth-child(2) {
                margin-top: -1px;
            }

            &:nth-child(3) {
                margin-top: 4px;
            }
        }

        /* Hamburger button on active */
        &.active span:nth-child(1) {
            margin-left: -5px;
            transform: rotate(45deg);
            transform-origin: left top;
        }

        &.active span:nth-child(2) {
            opacity: 0;
        }

        &.active span:nth-child(3) {
            margin-left: -5px;
            transform: rotate(-45deg);
            transform-origin: left bottom;
        }
    }

    /* Hide drop down menu items */
    .nav-left,
    .nav-center,
    .nav-right {
        overflow: hidden;
    }

    /* No need for JS to show dropdown menu on mobile devices now */
    .header .nav-item.has-sub.toggle-hover:not(.no-hover):hover > .dropdown-menu {
        @include mobile-dropdown-menu-show();
    }
}