// 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 arrow color if arrow is used.
/// @type Color
$drilldown-arrow-color: $primary-color !default;

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

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

    li {
      display: block !important;
    }
  }

  // Applied to nested <ul>s
  .is-drilldown-submenu {
    position: absolute;
    top: 0;
    #{$global-left}: 100%;
    z-index: -1;
    height: 100%;
    width: 100%;
    background: $drilldown-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%));
    }
  }

  @if $drilldown-arrows {
    .is-drilldown-submenu-parent > a {
      position: relative;

      &::after {
        @include css-triangle(6px, $drilldown-arrow-color, $global-right);
        position: absolute;
        top: 50%;
        margin-top: -6px;
        #{$global-right}: 1rem;
      }
    }

    .js-drilldown-back > a::before {
      @include css-triangle(6px, $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
    }
  }
}