@import "settings";
@import "foundation-sites/scss/components/accordion-menu";

/// Set to false to not include default Accordion Menu CSS classes
/// @type Bool
$bonsai-include-accordion-menu: $bonsai-include-components !default;

/// Change the anchor styling for the accordion menu
@mixin accordion-menu-anchor {
  font-weight: bold;
}

/// Change the background color and outline during hover state
///
/// @param {Color} $background-color - Hover background color
/// @param {Keyword} $outline - Accordion menu outline
///
@mixin accordion-menu-hover {
  background-color: $bonsai-hover-background;
  outline: none;
  color: $bonsai-dark-blue;

  @include indicator-bar(left, $bonsai-hover);
}

/// Change the background and color during active state
///
/// @param {Color} $color - Color of the active accordion menu
/// @param {Color} $background - Color of the background
///
@mixin accordion-menu-active {
  color: $bonsai-dark-blue;
  background: $bonsai-hover-background;

  @include indicator-bar(left);
}

/// Defines style for the chevron on the right side of the accordion menu
///
/// @param {Number} $font-size - Font size of the chevron
/// @param {Number} $top - Top of the chevron
///
@mixin accordion-menu-chevron {
  font-size: $bonsai-icon-size !important;
  top: $bonsai-spacing-base * 3 !important;
}

/// Accordion Menu Default Class Patterns
///
/// This will generate all default CSS classes when $bonsai-include-accordion-menu is true
@mixin bonsai-accordion-menu {
  @if $bonsai-include-accordion-menu {
    @include foundation-accordion-menu;

    .accordion-menu {
      & .active > a {
        @include accordion-menu-active;

        &:hover {
          @include accordion-menu-hover;
        }
      }

      > li {
        > a {
          @include accordion-menu-anchor;
        }

        a {
          &:focus,
          &:hover {
            @include accordion-menu-hover;
          }

          &::after {
            @include accordion-menu-chevron;
          }
        }
      }
    }
  }
}