//// /// @group accordion-menu ////

/// Sets accordion menu padding. /// @type Number $accordionmenu-padding: $global-menu-padding !default;

/// Sets accordion menu nested margin /// @type Number $accordionmenu-nested-margin: $global-menu-nested-margin !default;

/// Sets accordion menu submenu padding. /// @type Number $accordionmenu-submenu-padding: $accordionmenu-padding !default;

/// Sets if accordion menus have the default arrow styles. /// @type Boolean $accordionmenu-arrows: true !default;

/// Sets accordion menu arrow color if arrow is used. /// @type Color $accordionmenu-arrow-color: $primary-color !default;

/// Sets accordion menu item padding. /// @type Color $accordionmenu-item-background: null !default;

/// Sets accordion menu item border. /// @type Color $accordionmenu-border: null !default;

/// Sets accordion menu item padding. /// @type Color $accordionmenu-submenu-toggle-background: null !default;

/// Sets accordion menu item padding. /// @type List $accordion-submenu-toggle-border: $accordionmenu-border !default;

/// Sets accordion menu submenu toggle background width. /// @type Number $accordionmenu-submenu-toggle-width: 40px !default;

/// Sets accordion menu submenu toggle background height. /// @type Number $accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;

/// Sets accordion menu arrow size if arrow is used. /// @type Length $accordionmenu-arrow-size: 6px !default;

@mixin zf-accordion-menu-left-right-arrows {

.is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
  position: relative;

  &::after {
    @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
    position: absolute;
    top: 50%;
    margin-top: -1 * ($accordionmenu-arrow-size / 2);
    #{$global-right}: 1rem;
  }
}
&.align-left .is-accordion-submenu-parent > a::after {
  left: auto;
  right: 1rem;
}
&.align-right .is-accordion-submenu-parent > a::after {
  right: auto;
  left: 1rem;
}

} @mixin foundation-accordion-menu {

.accordion-menu {
  @if $accordionmenu-border {
    border-bottom: $accordionmenu-border;
  }

  li {
    @if $accordionmenu-border {
      border-top: $accordionmenu-border;
      border-right: $accordionmenu-border;
      border-left: $accordionmenu-border;
    }
    width: 100%;
  }

  a {
    @if $accordionmenu-item-background {
      background: $accordionmenu-item-background;
    }
    padding: $accordionmenu-padding;
  }

  .is-accordion-submenu a {
    padding: $accordionmenu-submenu-padding;
  }

  .nested.is-accordion-submenu {
    @include menu-nested($accordionmenu-nested-margin);
  }

  &.align-#{$global-right} {
    .nested.is-accordion-submenu {
      @include menu-nested($accordionmenu-nested-margin, right);
    }
  }

  @if $accordionmenu-arrows {
    @include zf-accordion-menu-left-right-arrows;

    .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
      transform: rotate(180deg);
      transform-origin: 50% 50%;
    }
  }
}

.is-accordion-submenu li {
  @if $accordionmenu-border {
    border-right: 0;
    border-left: 0;
  }
}

.is-accordion-submenu-parent {
  position: relative;
}

.has-submenu-toggle > a {
  margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
}

// Submenu toggle
.submenu-toggle {
  position: absolute;
  top: 0;
  #{$global-right}: 0;
  cursor: pointer;

  width: $accordionmenu-submenu-toggle-width;
  height: $accordionmenu-submenu-toggle-height;

  border-#{$global-left}: $accordion-submenu-toggle-border;

  @if $accordionmenu-submenu-toggle-background {
    background: $accordionmenu-submenu-toggle-background;
  }

  // Add the arrow to the toggle
  &::after {
    @include css-triangle(6px, $accordionmenu-arrow-color, down);

    top: 0;
    bottom: 0;
    margin: auto;
  }
}

// Rotate the arrow when menu is open
.submenu-toggle[aria-expanded='true']::after {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

.submenu-toggle-text {
  @include element-invisible;
}

}