@import "settings";
@import "utils";
@import "separators";
@import "links";

/// Set to false to exclude 'nav' from bundle
/// @type Bool
$bonsai-include-top-nav: $bonsai-include-components !default;

/// Default title margin
/// @type Number | List
$bonsai-top-bar-title-margin: 0 0.875rem 0.4375rem 0;

/// Default height of logo in the title bar
/// @type Number
$bonsai-top-bar-logo-height: 93px !default;

/// Default width of logo in the title bar
/// @type Number
$bonsai-top-bar-logo-width: 68px !default;

/// Default padding around logo in the title bar
/// @type Number | List
$bonsai-top-bar-padding: 0 0 7px 0 !default;

/// Default width of input fields in top-bar
/// @type Number
$bonsai-top-bar-input-width: 400px !default;

/// Default bottom margin inside the input fields in the top-bar
/// @type Number
$bonsai-top-bar-input-margin-bottom: 6px !default;

/// Default bottom margin inside the input field group in the top-bar
/// @type Number
$bonsai-top-bar-input-group-margin-bottom: 0 !default;

/// Default background color of the top-bar
/// @type Color
$bonsai-top-bar-background: $bonsai-white !default;

/// Default bottom-margin of a top-bar
/// @type Number
$bonsai-top-bar-bottom-margin: $bonsai-spacing-base * 8 !default;

/// Set spacing determination to use flex-box (parent and child)
/// @param {List} $flexflow [row nowrap] - parent flex-flow element
/// @param {List} $flex [1 1 auto] - child flex
@mixin flex-parent-and-child($flex-flow: row nowrap, $flex: 1 1 auto) {
  display: flex;
  flex-flow: $flex-flow;
  flex: $flex;
}

//// Set borders and margin for the nav container
@mixin bonsai-nav-container {
  border-top: 1px solid $bonsai-light-gray;
  border-bottom: 1px solid $bonsai-light-gray;
  margin-bottom: $bonsai-top-bar-bottom-margin;
}

/// Set base top-bar container layout
@mixin bonsai-top-bar-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: flex-end;
  max-width: $bonsai-global-width;
  margin: 0 auto;
  padding: 0 0.875rem;
}

/// Set alignment and justification for top-bar-row
@mixin bonsai-top-bar-row-layout {
  align-items: center;
  justify-content: flex-end;
}

/// Set top-bar styling and layout
@mixin bonsai-top-bar {
  @include bonsai-top-bar-container;

  &-title {
    margin: $bonsai-top-bar-title-margin;
  }

  &-row {
    @include flex-parent-and-child($flex-flow: row nowrap);

    @include breakpoint(large down) {
      @include flex-parent-and-child($flex-flow: row wrap);
    }

    @include bonsai-top-bar-row-layout;
  }

  .input-group {
    margin-bottom: $bonsai-top-bar-input-group-margin-bottom;
  }

  .nav-main {
    @include flex-parent-and-child($flex-flow: column nowrap);
  }

  input {
    margin-bottom: $bonsai-top-bar-input-margin-bottom;
  }

  .nav-separator {
    @include vertical-rule-helper(null, 8px);
  }

  .flex01a {
    flex: 0 1 auto;
  }

  .flex-box-main {
    flex: 1 1 auto;
  }

  .search-container {
    @include breakpoint(large down) {
      width: 100%;
    }

    .input-group-field.select {
      @include breakpoint(small down) {
        display: none !important;
      }
    }
  }

  .hide-in-nav {
    display: none !important;
  }
}

/// Sets the styling of the mega-menu dropdown
@mixin bonsai-mega-nav {
  %global-menu-hover {
    background-color: $bonsai-hover-background;

    @include indicator-bar($direction: left, $color: $bonsai-hover-border);
  }

  %global-menu-non-link {
    padding: 0.6215rem 0.875rem;
    display: inline-block;
  }

  .mega-menu-item {
    h5 {
      @extend %global-menu-non-link;
    }

    > li:not(:last-child) {
      border-bottom: $bonsai-standard-border;
    }

    li {
      width: 100%;

      & a.active {
        background-color: $bonsai-hover-background;

        @include indicator-bar($direction: left);
      }

      & a:hover,
      & a:focus {
        @extend %global-menu-hover;
      }
    }
  }

  .second-sub a {
    &:hover,
    &:focus {
      @extend %global-menu-hover;
    }
  }

  em {
    @extend %global-menu-non-link;
  }
}

/// Applies bonsai nav styling to `<nav>` and `.top-bar`
@mixin bonsai-navigation {
  @if $bonsai-include-top-nav {
    nav {
      @include bonsai-nav-container;
    }

    .top-bar {
      @include bonsai-top-bar;

      .dropdown.menu {
        padding-left: $bonsai-spacing-medium;

        @include breakpoint(large down) {
          padding-left: 0;
        }
      }
    }

    .negate-nav-bottom-margin {
      margin-top: -$bonsai-top-bar-bottom-margin;
    }

    .mega-menu {
      @include bonsai-mega-nav;
    }
  }
}