// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

@import 'global';
@import 'grid';
@import 'buttons';
@import 'forms';

//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes !default;

// Background color for the top bar
$topbar-bg-color: $oil !default;
$topbar-bg: $topbar-bg-color !default;

// Height and margin
$topbar-height: rem-calc(45) !default;
$topbar-margin-bottom: 0 !default;

// Controlling the styles for the title in the top bar
$topbar-title-weight: $font-weight-normal !default;
$topbar-title-font-size: rem-calc(17) !default;

// Set the link colors and styles for top-level nav
$topbar-link-color: $white !default;
$topbar-link-color-hover: $white !default;
$topbar-link-color-active: $white !default;
$topbar-link-color-active-hover: $white !default;
$topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: $topbar-bg !default;
$topbar-link-bg-hover: $jet !default;
$topbar-link-bg-color-hover: $charcoal !default;
$topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
$topbar-link-font-family: $body-font-family !default;
$topbar-link-text-transform: none !default;
$topbar-link-padding: ($topbar-height / 3) !default;
$topbar-back-link-size: rem-calc(18) !default;
$topbar-link-dropdown-padding: rem-calc(20) !default;
$topbar-button-font-size: .75rem !default;
$topbar-button-top: 7px !default;

// Style the top bar dropdown elements
$topbar-dropdown-bg: $oil !default;
$topbar-dropdown-link-color: $white !default;
$topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
$topbar-dropdown-link-bg: $oil !default;
$topbar-dropdown-link-bg-hover: $jet !default;
$topbar-dropdown-link-weight: $font-weight-normal !default;
$topbar-dropdown-toggle-size: 5px !default;
$topbar-dropdown-toggle-color: $white !default;
$topbar-dropdown-toggle-alpha: .4 !default;

$topbar-dropdown-label-color: $monsoon !default;
$topbar-dropdown-label-text-transform: uppercase !default;
$topbar-dropdown-label-font-weight: $font-weight-bold !default;
$topbar-dropdown-label-font-size: rem-calc(10) !default;
$topbar-dropdown-label-bg: $oil !default;

// Top menu icon styles
$topbar-menu-link-transform: uppercase !default;
$topbar-menu-link-font-size: rem-calc(13) !default;
$topbar-menu-link-weight: $font-weight-bold !default;
$topbar-menu-link-color: $white !default;
$topbar-menu-icon-color: $white !default;
$topbar-menu-link-color-toggled: $jumbo !default;
$topbar-menu-icon-color-toggled: $jumbo !default;
$topbar-menu-icon-position: $opposite-direction !default; // Change to $default-float for a left menu icon

// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;

// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: 821px !default; //#{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})" !default;

// Top-bar input styles
$topbar-input-height: rem-calc(28) !default;

// Divider Styles
$topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;

// Sticky Class
$topbar-sticky-class: ".sticky" !default;
$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
$topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li

// Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown {
    // Makes an element visually hidden by default, but visible when focused.
    @include element-invisible();
    display: block;
}

@mixin topbar-show-dropdown {
    @include element-invisible-off();
    display: block;
    position: absolute !important; // Reset the position from static to absolute
}

@include exports("top-bar") {

    @if $include-html-top-bar-classes {

        // Used to provide media query values for javascript components.
        // This class is generated despite the value of $include-html-top-bar-classes
        // to ensure width calculations work correctly.
        meta.foundation-mq-topbar {
            font-family: "/" + unquote($topbar-media-query) + "/";
            width: $topbar-breakpoint;
        }

        /* Wrapped around .top-bar to contain to grid width */
        .contain-to-grid {
            width: 100%;
            background: $topbar-bg;

            .top-bar {
                margin-bottom: $topbar-margin-bottom;
            }
        }

        // Wrapped around .top-bar to make it stick to the top
        .fixed {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 99;
            #{$default-float}: 0;

            &.expanded:not(.top-bar) {
                height: auto;
                max-height: 100%;
                overflow-y: auto;
                width: 100%;

                .title-area {
                    position: fixed;
                    width: 100%;
                    z-index: 99;
                }

                // Ensure you can scroll the menu on small screens
                .top-bar-section {
                    margin-top: $topbar-height;
                    z-index: 98;
                }
            }
        }

        .top-bar {
            background: $topbar-bg;
            height: $topbar-height;
            line-height: $topbar-height;
            margin-bottom: $topbar-margin-bottom;
            overflow: hidden;
            position: relative;

            // Topbar Global list Styles
            ul {
                list-style: none;
                margin-bottom: 0;
            }

            .row {
                max-width: none;
            }

            form,
            input, 
            select {
                margin-bottom: 0;
            }

            input, 
            select {
                font-size: $topbar-button-font-size;
                height: $topbar-input-height;
                padding-bottom: .35rem;
                padding-top: .35rem;
            }

            .button, button {
                font-size: $topbar-button-font-size;
                margin-bottom: 0;
                padding-bottom: .35rem + rem-calc(1);
                padding-top: .35rem + rem-calc(1);
                // position: relative;
                // top: -1px;

                // Corrects a slight misalignment when put next to an input field
                @media #{$small-only} {
                    position: relative;
                    top: -1px;
                }
            }

            // Title Area
            .title-area {
                margin: 0;
                position: relative;
            }

            .name {
                font-size: $rem-base;
                height: $topbar-height;
                margin: 0;

                h1, h2, h3, h4, p, span {
                    font-size: $topbar-title-font-size;
                    line-height: $topbar-height;
                    margin: 0;

                    a {
                        color: $topbar-link-color;
                        display: block;
                        font-weight: $topbar-title-weight;
                        padding: 0 $topbar-link-padding;
                        width: 75%;
                    }
                }
            }

            // Menu toggle button on small devices
            .toggle-topbar {
                position: absolute;
                #{$topbar-menu-icon-position}: 0;
                top: 0;

                a {
                    color: $topbar-link-color;
                    display: block;
                    font-size: $topbar-menu-link-font-size;
                    font-weight: $topbar-menu-link-weight;
                    height: $topbar-height;
                    line-height: $topbar-height;
                    padding: 0 $topbar-link-padding;
                    position: relative;
                    text-transform: $topbar-menu-link-transform;
                }

                // Adding the class "menu-icon" will add the 3-line icon people love and adore.
                &.menu-icon {
                    margin-top: -16px;
                    top: 50%;

                    a {
                        @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);

                        @if $text-direction == rtl {
                            text-indent: -58px;
                        }
                        color: $topbar-menu-link-color;
                        height: 34px;
                        line-height: 33px;
                        padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
                        position: relative;
                    }
                }
            }

            // Change things up when the top-bar is expanded
            &.expanded {
                background: transparent;
                height: auto;

                .title-area {
                    background: $topbar-bg;
                }

                .toggle-topbar {
                    a {
                        color: $topbar-menu-link-color-toggled;

                        span::after {
                            // Shh, don't tell, but box-shadows create the menu icon :)
                            // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
                            box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
                                0 7px 0 1px $topbar-menu-icon-color-toggled,
                                0 14px 0 1px $topbar-menu-icon-color-toggled;
                        }
                    }
                }

                // Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don't appear
                @media screen and (-webkit-min-device-pixel-ratio:0) {
                    .top-bar-section {
                        .has-dropdown.moved > .dropdown,
                        .dropdown {
                            clip: initial;
                        }

                        // This was needed as parent ul's had padding, and the clip: was allowing content to peak through
                        .has-dropdown:not(.moved) > ul {
                            padding: 0;
                        }
                    }
                }
            }
        }

        // Right and Left Navigation that stacked by default
        .top-bar-section {
            #{$default-float}: 0;
            position: relative;
            width: auto;
            @include single-transition($default-float, $topbar-transition-speed);

            ul {
                display: block;
                font-size: $rem-base;
                height: auto;
                margin: 0;
                padding: 0;
                width: 100%;
            }

            .divider,
            [role="separator"] {
                border-top: $topbar-divider-border-top;
                clear: both;
                height: 1px;
                width: 100%;
            }

            ul li {
                background: $topbar-dropdown-bg;

                > a {
                    color: $topbar-link-color;
                    display: block;
                    font-family: $topbar-link-font-family;
                    font-size: $topbar-link-font-size;
                    font-weight: $topbar-link-weight;
                    padding-#{$default-float}: $topbar-link-padding;
                    padding: 12px 0 12px $topbar-link-padding;
                    text-transform: $topbar-link-text-transform;
                    width: 100%;

                    &.button {
                        font-size: $topbar-link-font-size;
                        padding-#{$default-float}: $topbar-link-padding;
                        padding-#{$opposite-direction}: $topbar-link-padding;
                        @include button-style($bg:$primary-color);
                    }

                    &.button.secondary { @include button-style($bg:$secondary-color); }
                    &.button.success { @include button-style($bg:$success-color); }
                    &.button.alert { @include button-style($bg:$alert-color); }
                    &.button.warning { @include button-style($bg:$warning-color); }
                    &.button.info { @include button-style($bg:$info-color); }
                }

                > button {
                    font-size: $topbar-link-font-size;
                    padding-#{$default-float}: $topbar-link-padding;
                    padding-#{$opposite-direction}: $topbar-link-padding;
                    @include button-style($bg:$primary-color);

                    &.secondary { @include button-style($bg:$secondary-color); }
                    &.success { @include button-style($bg:$success-color); }
                    &.alert { @include button-style($bg:$alert-color); }
                    &.warning { @include button-style($bg:$warning-color); }
                    &.info { @include button-style($bg:$info-color); }
                }

                // Apply the hover link color when it has that class
                &:hover:not(.has-form) > a {
                    background-color: $topbar-link-bg-color-hover;
                    color: $topbar-link-color-hover;

                    @if ($topbar-link-bg-hover) {
                        background: $topbar-link-bg-hover;
                    }
                }

                // Apply the active link color when it has that class
                &.active > a {
                    background: $topbar-link-bg-active;
                    color: $topbar-link-color-active;

                    &:hover {
                        background: $topbar-link-bg-active-hover;
                        color: $topbar-link-color-active-hover;
                    }
                }
            }

            // Add some extra padding for list items contains buttons
            .has-form {
                padding: $topbar-link-padding;
            }

            // Styling for list items that have a dropdown within them.
            .has-dropdown {
                position: relative;

                > a {
                    &:after {
                        @if ($topbar-arrows) {
                            @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
                        }

                        margin-#{$opposite-direction}: $topbar-link-padding;
                        margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
                        position: absolute;
                        top: 50%;
                        #{$opposite-direction}: 0;
                    }
                }

                &.moved {
                    position: static;

                    > .dropdown {
                        @include topbar-show-dropdown();
                        width: 100%;
                    }

                    > a:after {
                        display: none;
                    }
                }
            }

            // Styling elements inside of dropdowns
            .dropdown {
                @include topbar-hide-dropdown();
                padding: 0;
                position: absolute;
                top: 0;
                z-index: 99;
                #{$default-float}: 100%;

                li {
                    height: auto;
                    width: 100%;

                    a {
                        font-weight: $topbar-dropdown-link-weight;
                        padding: 8px $topbar-link-padding;
                        &.parent-link {
                            font-weight: $topbar-link-weight;
                        }
                    }

                    &.title h5,
                    &.parent-link {
                        // Back Button
                        margin-bottom: 0;
                        margin-top: 0;
                        font-size: $topbar-back-link-size;
                        a {
                            color: $topbar-link-color;
                            // line-height: ($topbar-height / 2);
                            display: block;
                            &:hover { background:none; }
                        }
                    }

                    &.has-form {
                        padding: 8px $topbar-link-padding;
                    }

                    .button,
                    button {
                        top: auto;
                    }
                }

                label {
                    color: $topbar-dropdown-label-color;
                    font-size: $topbar-dropdown-label-font-size;
                    font-weight: $topbar-dropdown-label-font-weight;
                    margin-bottom: 0;
                    padding: 8px $topbar-link-padding 2px;
                    text-transform: $topbar-dropdown-label-text-transform;
                }
            }
        }

        .js-generated { display: block; }


        // Top Bar styles intended for screen sizes above the breakpoint.
        @media #{$topbar-media-query} {
            .top-bar {
                @include clearfix;
                background: $topbar-bg;
                overflow: visible;

                .toggle-topbar { display: none; }

                .title-area { float: $default-float; }
                .name h1 a,
                .name h2 a,
                .name h3 a,
                .name h4 a,
                .name h5 a,
                .name h6 a { width: auto; }

                input,
                select,
                .button,
                button {
                    font-size: rem-calc(14);
                    height: $topbar-input-height;
                    position: relative;
                    top: (($topbar-height - $topbar-input-height) / 2);
                }

                .has-form > .button,
                .has-form > button {
                    font-size: rem-calc(14);
                    height: $topbar-input-height;
                    position: relative; 
                    top: (($topbar-height - $topbar-input-height) / 2);
                }

                &.expanded {
                    background: $topbar-bg;
                }
            }

            .contain-to-grid .top-bar {
                margin: 0 auto;
                margin-bottom: $topbar-margin-bottom;
                max-width: $row-width;
            }

            .top-bar-section {
                @include single-transition(none,0,0);
                #{$default-float}: 0 !important;

                ul {
                    display: inline;
                    height: auto !important;
                    width: auto;

                    li {
                        float: $default-float;
                        .js-generated { display: none; }
                    }
                }

                li {
                    &.hover {
                        > a:not(.button) {
                            background-color: $topbar-link-bg-color-hover;
                            @if ($topbar-link-bg-hover) {
                                background: $topbar-link-bg-hover;
                            }
                            color: $topbar-link-color-hover;
                        }
                    }

                    &:not(.has-form) {
                        a:not(.button) {
                            background: $topbar-link-bg;
                            line-height: $topbar-height;
                            padding: 0 $topbar-link-padding;
                            &:hover {
                                background-color: $topbar-link-bg-color-hover;
                                @if ($topbar-link-bg-hover) {
                                    background: $topbar-link-bg-hover;
                                }
                            }
                        }
                    }

                    &.active:not(.has-form) {
                        a:not(.button) {
                            background: $topbar-link-bg-active;
                            color: $topbar-link-color-active;
                            line-height: $topbar-height;
                            padding: 0 $topbar-link-padding;
                            &:hover {
                                background: $topbar-link-bg-active-hover;
                                color: $topbar-link-color-active-hover;
                            }
                        }
                    }
                }

                .has-dropdown {
                    @if $topbar-arrows {
                        > a {
                            padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
                            &:after {
                                @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                                margin-top: -($topbar-dropdown-toggle-size / 2);
                                top: ($topbar-height / 2);
                            }
                        }
                    }

                    &.moved { position: relative;
                              > .dropdown {
                                  @include topbar-hide-dropdown();
                              }
                    }

                    &.hover, &.not-click:hover {
                        > .dropdown {
                            @include topbar-show-dropdown();
                        }
                    }

                    > a:focus + .dropdown {
                        @include topbar-show-dropdown();
                    }

                    .dropdown li.has-dropdown {
                        > a {
                            @if ($topbar-dropdown-arrows) {
                                &:after {
                                    border: none;
                                    content: "\00bb";
                                    top: rem-calc(3);

                                    #{$opposite-direction}: 5px;
                                }
                            }
                        }
                    }
                }

                .dropdown {
                    #{$default-float}: 0;
                    background: transparent;
                    min-width: 100%;
                    top: auto;

                    li {
                        a {
                            background: $topbar-dropdown-link-bg;
                            color: $topbar-dropdown-link-color;
                            line-height: $topbar-height;
                            padding: 12px $topbar-link-padding;
                            white-space: nowrap;
                        }

                        &:not(.has-form):not(.active) {
                            > a:not(.button) {
                                background: $topbar-dropdown-link-bg;
                                color: $topbar-dropdown-link-color;
                            }

                            &:hover > a:not(.button) {
                                background-color: $topbar-link-bg-color-hover;
                                color: $topbar-dropdown-link-color-hover;
                                @if ($topbar-dropdown-link-bg-hover) {
                                    background: $topbar-dropdown-link-bg-hover;
                                }
                            }
                        }

                        label {
                            background: $topbar-dropdown-label-bg;
                            white-space: nowrap;
                        }

                        // Second Level Dropdowns
                        .dropdown {
                            #{$default-float}: 100%;
                            top: 0;
                        }
                    }
                }

                > ul > .divider,
                > ul > [role="separator"] {
                    border-#{$opposite-direction}: $topbar-divider-border-bottom;
                    border-bottom: none;
                    border-top: none;
                    clear: none;
                    height: $topbar-height;
                    width: 0;
                }

                .has-form {
                    background: $topbar-link-bg;
                    height: $topbar-height;
                    padding: 0 $topbar-link-padding;
                }

                // Position overrides for ul.right and ul.left
                .#{$opposite-direction} {
                    li .dropdown {
                        #{$default-float}: auto;
                        #{$opposite-direction}: 0;

                        li .dropdown { #{$opposite-direction}: 100%; }
                    }
                }
                .#{$default-float} {
                    li .dropdown {
                        #{$opposite-direction}: auto;
                        #{$default-float}: 0;

                        li .dropdown { #{$default-float}: 100%; }
                    }
                }
            }

            // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
            // background & text color on hover.
            .no-js .top-bar-section {
                ul li {
                    // Apply the hover link color when it has that class
                    &:hover > a {
                        background-color: $topbar-link-bg-color-hover;
                        @if ($topbar-link-bg-hover) {
                            background: $topbar-link-bg-hover;
                        }
                        color: $topbar-link-color-hover;
                    }

                    // Apply the active link color when it has that class
                    &:active > a {
                        background: $topbar-link-bg-active;
                        color: $topbar-link-color-active;
                    }
                }

                .has-dropdown {
                    &:hover {
                        > .dropdown {
                            @include topbar-show-dropdown();
                        }
                    }

                    > a:focus + .dropdown {
                        @include topbar-show-dropdown();
                    }
                }
            }
        }
    }
}
