// 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-nested-margin: $global-menu-nested-margin !default;

/// Padding for items in a pill menu. /// @type Number $menu-items-padding: $global-menu-padding !default;

/// margin for items in a simple menu. /// @type Number $menu-simple-margin: 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;

/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. /// But please note that `active` will be removed in upcoming versions. /// @type Boolean $menu-state-back-compat: true !default;

/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`. /// But please note that `menu-centered` will be removed in upcoming versions. /// @type Boolean $menu-centered-back-compat: true !default;

/// Backward compatibility for using `icon-*` classes without `.icons` classes /// But please note that this backward compatibility will be removed in upcoming versions. /// @type Boolean $menu-icons-back-compat: true !default;

/// Creates the base styles for a Menu. @mixin menu-base {

padding: 0;
margin: 0;
list-style: none;
position: relative;

@if $global-flexbox {
  display: flex;
  flex-wrap: wrap;
}

li {
  @include disable-mouse-outline;
}

a,
.button {
  line-height: 1;
  text-decoration: none;
  display: block;
  padding: $menu-items-padding;
}

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

input {
  display: inline-block;
}

}

/// 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%;

  > li {
    display: table-cell;
    vertical-align: middle;
  }
}

}

/// Align menu items. @mixin menu-align($alignment) {

@if $alignment == left {
  @if $global-flexbox {
    justify-content: flex-start;
  }
  @else {
    text-align: $global-left;
  }
}
@else if $alignment == right {
  @if $global-flexbox {
    li {
      display: flex;
      justify-content: flex-end;

      .submenu li {
        justify-content: flex-start;
      }
    }

    &.vertical li {
      display: block;
      text-align: $global-right;

      .submenu li {
        text-align: $global-right;
      }
    }
  }
  @else {
    text-align: $global-right;

    .submenu li {
      text-align: $global-left;
    }

    &.vertical {
      .submenu li {
        text-align: $global-right;
      }
    }
  }
}
@else if $alignment == center {
  @if $global-flexbox {
    li {
      display: flex;
      justify-content: center;

      .submenu li {
        justify-content: flex-start;
      }
    }
  }
  @else {
    text-align: center;

    .submenu li {
      text-align: $global-left;
    }
  }
}

}

/// 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: wrap;
    flex-direction: row;
  }
  @else {
    li {
      display: inline-block;
    }
  }
}
@else if $dir == vertical {
  @if $global-flexbox {
    flex-wrap: nowrap;
    flex-direction: column;
  }
  @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. This effects the side of the `<li>` that receives the margin. /// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`. @mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {

@if $global-flexbox {
  align-items: center;
}

li + li {
  margin-#{$dir}: $margin;
}

a {
  padding: 0;
}

}

/// Adds styles for a nested Menu, by adding `margin-left` to the menu. /// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin. /// @param {Keyword} $nested-alignment [left] - Alignment of the nested class @mixin menu-nested(

$margin: $menu-nested-margin,
$nested-alignment: left

) {

@if $nested-alignment == right {
  margin-#{$global-right}: $margin;
  margin-#{$global-left}: 0;
}
@else {
  margin-#{$global-right}: 0;
  margin-#{$global-left}: $margin;
}

}

/// Adds basic styles for icons in menus. @mixin menu-icons() {

@if $global-flexbox {
  a {
    display: flex;
  }
}
@else {
  img,
  i,
  svg {
    vertical-align: middle;

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

}

/// Adds position classes for icons within a menu. @mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {

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

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

      @if not $global-flexbox {
        display: inline-block;
      }
    }
  }
}
@else if $position == right {
  li a {
    @if $global-flexbox {
      flex-flow: row nowrap;
    }

    img,
    i,
    svg {
      margin-#{$global-left}: $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 $spacing;
      }
      @else {
        align-self: stretch;
        margin-bottom: $spacing;
        text-align: center;
      }
    }
  }
}
@else if $position == bottom {
  li a {
    @if $global-flexbox {
      flex-flow: column nowrap;
    }
    @else {
      text-align: center;
    }

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

}

@mixin menu-text {

padding: $global-menu-padding;

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

}

@mixin menu-state-active {

background: $menu-item-background-active;
color: $menu-item-color-active;

}

@mixin foundation-menu {

.menu {
  @include menu-base;

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

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

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

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

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

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

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

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

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

  // Icon Base Styles
  &.icons {
    @include menu-icons;
  }

  // Backward Compatibility for active state
  @if $menu-icons-back-compat {
    &.icon-top,
    &.icon-right,
    &.icon-bottom,
    &.icon-left {
      @include menu-icons;
    }
  }

  // Icon Left
  &.icon-left {
    @include menu-icon-position(left);
  }

  // Icon Right
  &.icon-right {
    @include menu-icon-position(right);
  }

  // Icon Top
  &.icon-top {
    @include menu-icon-position(top);
  }

  // Icon Bottom
  &.icon-bottom {
    @include menu-icon-position(bottom);
  }

  // Active state
  .is-active > a {
    @include menu-state-active;
  }

  // Backward Compatibility for active state
  @if $menu-state-back-compat {
    .active > a {
      @include menu-state-active;
    }
  }

  // Align left
  &.align-#{$global-left} {
    @include menu-align(left);
  }

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

    .nested {
      @include menu-nested($nested-alignment: right);
    }
  }

  // Align center
  &.align-center {
    @include menu-align(center);
  }

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

@if $menu-centered-back-compat {
  .menu-centered {
    > .menu {
      @if $global-flexbox {
        justify-content: center;
      }

      @include menu-align(center);
    }
  }
}

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

}