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

////
/// @group menu
////

/// Margin of a menu.
/// @type Number
$menu-margin: 0 !default;

/// Left-hand margin of a nested menu.
/// @type Number
$menu-margin-nested: 1rem !default;

/// Padding for items in a menu.
/// @type Number
$menu-item-padding: 0.7rem 1rem !default;

/// Text color of an active menu item.
/// @type Color
$menu-item-color-active: $white !default;

/// Background color of an active menu item.
/// @type Color
$menu-item-background-active: get-color(primary) !default;

/// Spacing between an icon and text in a menu item.
/// @type Number
$menu-icon-spacing: 0.25rem !default;

/// Background color for an hovered menu item.
/// @type Color
$menu-item-background-hover: $light-gray !default;

/// Color for bordered menu
/// @type Color
$menu-border: $light-gray !default;

/// Creates the base styles for a Menu.
@mixin menu-base {
  margin: $menu-margin;
  list-style-type: none;

  @if $global-flexbox {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }

  // List items are table cell to allow for vertical alignment
  > li {
    @include disable-mouse-outline;

    @if $global-flexbox {
      flex: 0 0 auto;
    }
    @else {
      display: table-cell;
      vertical-align: middle;
    }
  }

  // Reset line height to make the height of the overall item easier to calculate
  > li > a {
    display: block;
    padding: $menu-item-padding;
    line-height: 1;
  }

  // Reset styles of inner elements
  input,
  select,
  a,
  button {
    margin-bottom: 0;
  }
}

/// Expands the items of a Menu, so each item is the same width.
@mixin menu-expand {
  @if $global-flexbox {
    > li {
      flex: 1 1 0px; // sass-lint:disable-line zero-unit
    }
  }
  @else {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  > li:first-child:last-child {
    width: 100%;
  }
}

/// Sets the direction of a Menu.
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
@mixin menu-direction($dir: horizontal) {
  @if $dir == horizontal {
    @if $global-flexbox {
      flex-wrap: nowrap;

      > li {
        flex: 0 0 auto;
      }
    }
    @else {
      > li {
        display: table-cell;
      }
    }
  }
  @else if $dir == vertical {
    @if $global-flexbox {
      flex-wrap: wrap;

      > li {
        flex: 0 0 100%;
        max-width: 100%;
      }

      > li  > a {
        justify-content: flex-start;
        align-items: flex-start;
      }
    }
    @else {
      > li {
        display: block;
      }
    }
  }
  @else {
    @warn 'The direction used for menu-direction() must be horizontal or vertical.';
  }
}

/// Creates a simple Menu, which has no padding or hover state.
/// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
@mixin menu-simple($dir: $global-left) {
  li {
    display: inline-block;
    vertical-align: top;
    line-height: 1;
  }

  a {
    padding: 0;
  }

  @if $dir != null {
    @include menu-simple-direction($dir);
  }
}

/// Direction modifier for a simple Menu
/// @param {Keyword} $dir [$global-left] - Direction of the menu
@mixin menu-simple-direction($dir: $global-left) {
  $no-margin-dir: $dir;
  $margin-dir: direction-opposite($dir);

  li {
    margin-#{$no-margin-dir}: 0;
    margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
  }
}

/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
/// @param {Keyword|Number} $padding [auto] - Length of the margin.
@mixin menu-nested($margin: $menu-margin-nested) {
  margin-#{$global-left}: $margin;
}

/// Adds support for icons to Menu items.
/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
@mixin menu-icons($position: side, $base: true) {
  @if $base {
    @if $global-flexbox {
      > li > a {
        display: flex;
      }
    }
    @else {
      > li > a {
        img,
        i,
        svg {
          vertical-align: middle;

          + span {
            vertical-align: middle;
          }
        }
      }
    }
  }

  @if $position == side {
    > li > a {
      @if $global-flexbox {
        flex-flow: row nowrap;
      }

      img,
      i,
      svg {
        margin-#{$global-right}: $menu-icon-spacing;

        @if not $global-flexbox {
          display: inline-block;
        }
      }
    }
  }
  @else if $position == top {
    > li > a {
      @if $global-flexbox {
        flex-flow: column nowrap;
      }
      @else {
        text-align: center;
      }

      img,
      i,
      svg {
        @if not $global-flexbox {
          display: block;
          margin: 0 auto $menu-icon-spacing;
        }
        @else {
          align-self: stretch;
          margin-bottom: $menu-icon-spacing;
          text-align: center;
        }
      }
    }
  }
}

@mixin menu-text {
  padding-top: 0;
  padding-bottom: 0;
  padding: $menu-item-padding;

  font-weight: bold;
  line-height: 1;
  color: inherit;
}

@mixin foundation-menu {
  .menu {
    @include menu-base;
    @include menu-icons;

    // Default orientation: horizontal
    &, &.horizontal {
      @include menu-direction(horizontal);
    }

    // Even-width modifier for horizontal orientation
    &.expanded {
      @include menu-expand;
    }

    // Vertical orientation modifier
    &.vertical {
      @include menu-direction(vertical);
    }

    @include -zf-each-breakpoint($small: false) {
      &.#{$-zf-size}-horizontal {
        @include menu-direction(horizontal);
      }

      &.#{$-zf-size}-expanded {
        @include menu-expand;
      }

      &.#{$-zf-size}-vertical {
        @include menu-direction(vertical);
      }
    }

    // Simple
    &.simple {
      @include menu-simple;

      &.align-#{$global-right} {
        @include menu-simple-direction($global-right);
      }
    }

    // Align right
    &.align-#{$global-right} {
      @if $global-flexbox {
        justify-content: flex-end;
      }
      @else {
        @include clearfix;

        > li {
          float: $global-right;
        }
      }
    }

    // Vertical icons
    &.icon-top {
      @include menu-icons(top, $base: false);
      // Make vertical menu with icons on top work
      &.vertical {
        a > span {
          margin: auto;
        }
      }
    }

    // Nesting
    &.nested {
      @include menu-nested;
    }

    // Active state
    .active > a {
      background: $menu-item-background-active;
      color: $menu-item-color-active;
    }

    // Menu with border
    &.menu-bordered {
      li {
        border: 1px solid $menu-border;
        &:not(:first-child) {
          border-top: 0;
        }
      }
    }

    // Menu with background hover
    &.menu-hover {
      li:hover {
        background-color: $menu-item-background-hover;
      }
    }
  }

  .menu-text {
    @include menu-text;
  }

  // Align center
  .menu-centered {
    text-align: center;

    > .menu {
      display: inline-block;
      vertical-align: top;
    }
  }

  // Prevent FOUC when using the Responsive Menu plugin
  .no-js [data-responsive-menu] ul {
    display: none;
  }
}