// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source

//// /// @group drilldown ////

/// Transition property to use for animating menus. /// @type Transition $drilldown-transition: transform 0.15s linear !default;

/// Adds arrows to drilldown items with submenus, as well as the back button. /// @type Boolean $drilldown-arrows: true !default;

/// Sets drilldown menu item padding. /// @type Number $drilldown-padding: $global-menu-padding !default;

/// Sets drilldown menu nested margin /// @type Number $drilldown-nested-margin: 0 !default;

/// Background color for drilldown top level items. /// @type Color $drilldown-background: $white !default;

/// Sets drilldown menu item padding in the submenu. /// @type Number $drilldown-submenu-padding: $drilldown-padding !default;

/// Background color for drilldown submenus. /// @type Color $drilldown-submenu-background: $white !default;

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

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

@mixin zf-drilldown-left-right-arrows {

.is-drilldown-submenu-parent > a {
  position: relative;
  &::after {
    position: absolute;
    top: 50%;
    margin-top: -1 * $drilldown-arrow-size;
    #{$global-right}: 1rem;
    @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
  }
}

&.align-left .is-drilldown-submenu-parent > a::after {
  left: auto;
  right: 1rem;
  @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
}

&.align-right .is-drilldown-submenu-parent > a::after {
  right: auto;
  left: 1rem;
  @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
}

}

@mixin foundation-drilldown-menu {

// Applied to the Menu container
.is-drilldown {
  position: relative;
  overflow: hidden;

  li {
    display: block;
  }

  &.animate-height {
    transition: height 0.5s;
  }
}

// The top level <ul>
.drilldown {
  a {
    padding: $drilldown-padding;
    background: $drilldown-background;
  }

  // Applied to submenu <ul>s
  .is-drilldown-submenu {
    position: absolute;
    top: 0;
    #{$global-left}: 100%;
    z-index: -1;

    width: 100%;
    background: $drilldown-submenu-background;
    transition: $drilldown-transition;

    &.is-active {
      z-index: 1;
      display: block;
      transform: translateX(if($global-text-direction == ltr, -100%, 100%));
    }

    &.is-closing {
      transform: translateX(if($global-text-direction == ltr, 100%, -100%));
    }

    // Submenu item padding
    a {
      padding: $drilldown-submenu-padding;
    }
  }

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

  .drilldown-submenu-cover-previous {
    min-height: 100%;
  }

  @if $drilldown-arrows {
    @include zf-drilldown-left-right-arrows;

    .js-drilldown-back > a::before {
      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
      border-#{$global-left}-width: 0;
      display: inline-block;
      vertical-align: middle;
      margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text

      border-#{$global-left}-width: 0;
    }
  }
}

}