@import "settings";
@import "foundation-sites/scss/components/dropdown";

/// Flag whether or not you want to include bonsai dropdown components
/// @type bool
$bonsai-include-dropdown: $bonsai-include-components !default;

/// Padding around dropdown menu items
/// @type number | list
$bonsai-dropdown-menu-parent-padding: $bonsai-spacing-base * 3 !default;

/// Padding around dropdown lists
/// @type number | list
$bonsai-dropdown-list-padding: $bonsai-spacing-small $bonsai-spacing-medium !default;

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

/// Styling for list items in the dropdown
@mixin bonsai-dropdown-list-item {
  padding: $bonsai-dropdown-list-padding;
  cursor: pointer;
  color: $bonsai-primary;
}

/// Styling for both active / on-hover items in a dropdown list
@mixin bonsai-dropdown-active-hover-item {
  @include indicator-bar(left, $bonsai-hover);
}

/// Styling for just on-hover of items in a dropdown list
@mixin bonsai-dropdown-hover-item {
  background-color: $bonsai-hover-background;
}

/// Styling for lists in the dropdown
@mixin bonsai-dropdown-list {
  @include bonsai-dropdown-list-item;

  &.active,
  &:hover {
    @include bonsai-dropdown-active-hover-item;
  }

  &:hover {
    @include bonsai-dropdown-hover-item;
  }
}

/// Gateway mixin for default bonsai dropdowns
@mixin bonsai-dropdown-pane {
  @if $bonsai-include-dropdown {
    @include foundation-dropdown;

    .dropdown-pane {
      list-style-type: none;
      z-index: 100;

      > li {
        @include bonsai-dropdown-list;
      }

      @include box-shadow($bonsai-dropdown-pane-box-shadow...);
    }
  }
}

/// Styling for content info dropdown list title
.drop-content-title {
  padding-right: $bonsai-spacing-base * 8;
}