@import "foundation-sites/scss/components/dropdown-menu";
@import "utils";
@import "links";

//Bonsai Variables

/// Set to false to not have bonsai style dropdown menus
/// @type Bool
$bonsai-include-dropdown-menu: $bonsai-include-components !default;

/// Padding for dropdown menu parent anchor
/// @type Number | List
$bonsai-dropdown-menu-parent-padding: $bonsai-spacing-base * 3 !default;

/// Box shadow for dropdown menu panel list
/// @type List
$bonsai-dropdown-pane-box-shadow: (0, $bonsai-spacing-base, ($bonsai-spacing-base * 3), 0, rgba($bonsai-black, 0.5)) !default;

// Foundation configuration
$dropdownmenu-arrows: false;

/// Styles for dropdownmenu item on focus/hover/active
///
/// @param {String} $direction [bottom] - the side that indicator bar would show up
@mixin bonsai-dropdownmenu-hover-style($direction: bottom) {
  &.active,
  &.active > a {
    @include indicator-bar($direction);

    background-color: $bonsai-hover-background;
    outline: none;
  }

  &:focus,
  &:hover {
    @include indicator-bar($direction, $bonsai-hover);

    background-color: $bonsai-hover-background;
    outline: none;
  }
}

/// Styles for dropdownmenu parent item
///
/// @param {Bool} $has-arrow [true] - whether dropdownmenu parent has an arrow after the text
@mixin bonsai-dropdownmenu-parent-style($has-arrow: true) {
  @include bonsai-dropdownmenu-hover-style;

  display: inline-block;
  font-weight: bold;
  color: $bonsai-black;
  padding: $bonsai-dropdown-menu-parent-padding;

  @if $has-arrow {
    &::after {
      @include css-triangle;

      margin-left: $bonsai-spacing-base * 2;
    }
  }
}

/// Styles for dropdownmenu submenu panel and submenu item
@mixin bonsai-dropdownmenu-submenu-style() {
  @include box-shadow($bonsai-dropdown-pane-box-shadow...);

  z-index: 2000;
  padding-top: $bonsai-spacing-small;
  border-radius: $bonsai-spacing-base / 2;

  .is-submenu-item {
    &:not(.disabled) {
      @include bonsai-dropdownmenu-hover-style($direction: left);

      a {
        @include bonsai-dropdownmenu-hover-style($direction: left);
      }
    }

    &.disabled {
      cursor: not-allowed;

      a {
        @include link-disabled();
      }
    }

    &.active > a {
      color: $bonsai-primary;
    }
  }
}

/// Gateway mixin for bonsai dropdownmenu and populates dropdownmenu classes
///
/// @param {String} $direction [horizontal] - controlling the direction of dropdownmenu, horizontal or vertical
@mixin bonsai-dropdownmenu($direction: horizontal) {
  @if $bonsai-include-dropdown-menu {
    @include foundation-dropdown-menu;

    .dropdown.menu {
      @include dropdown-menu-direction($direction);

      .no-js & ul.menu {
        display: none;
      }

      @include breakpoint(medium down) {
        padding-left: 0 !important;
      }

      .is-active > a {
        color: $bonsai-link-hover;
      }

      .is-dropdown-submenu-parent {
        @include bonsai-dropdownmenu-hover-style;

        > a & .no-arrow {
          @include bonsai-dropdownmenu-parent-style($has-arrow: false);
        }

        > a:not(.no-arrow) {
          @include bonsai-dropdownmenu-parent-style;
        }

        .is-dropdown-submenu {
          @include bonsai-dropdownmenu-submenu-style;
        }
      }

      li.menu-item {
        @include bonsai-dropdownmenu-hover-style;

        > a {
          @include bonsai-dropdownmenu-parent-style($has-arrow: false);
        }
      }

      &.dropdown-button {
        .is-dropdown-submenu-parent,
        .button.secondary {
          &:hover,
          &:focus,
          &:active {
            box-shadow: none;
            background-color: inherit;
          }
        }
      }
    }
  }
}