// ---
// title: Dropdown
// description: A list of links that drops down from a trigger.
// ---

// Dropdowns are used by default for navigation elements, interactive,
// functional lists that show up below the trigger. This can include
// internal anchor links or wrapping links for the whole item.

// In rare cases popovers may be used.

// ### Dropdown Default
// <div class="example html">
//   <div class="lego-dropdown-group" v-dropdown>
//     <button class="lego-button" data-toggle-dropdown>
//       Dropdown <span class="lego-arrow-inline--down"></span>
//     </button>
//     <ul class="lego-dropdown">
//       <li class="lego-dropdown__item">
//         <a href="#" class="lego-dropdown__block-link">Manage Collaborators</a>
//         <a href="#" class="lego-dropdown__block-link">Manage This Thing</a>
//       </li>
//       <li class="lego-dropdown__item">
//         <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
//       </li>
//     </ul>
//   </div>
// </div>

// ### Dropdown Right
// Ignore the outer `div` in this example. It's used only to move the button to the right.

// <div class="example html">
//   <div style="text-align:right">
//     <div class="lego-dropdown-group" v-dropdown>
//       <button class="lego-button" data-toggle-dropdown>
//         Dropdown <span class="lego-arrow-inline--down"></span>
//       </button>
//       <ul class="lego-dropdown lego-dropdown--right">
//         <li class="lego-dropdown__item">
//           <a href="#" class="lego-dropdown__block-link">Manage Collaborators</a>
//           <a href="#" class="lego-dropdown__block-link">Manage This Thing</a>
//         </li>
//         <li class="lego-dropdown__item">
//           <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
//         </li>
//       </ul>
//     </div>
//   </div>
// </div>

// ### Dropdown with non-links

// <div class="example html">
//   <div class="lego-dropdown-group" v-dropdown>
//     <button class="lego-button" data-toggle-dropdown>
//       Dropdown <span class="lego-arrow-inline--down"></span>
//     </button>
//     <ul class="lego-dropdown">
//       <li class="lego-dropdown__item">
//         <a href="#">Manage Collaborators</a> and some text
//       </li>
//       <li class="lego-dropdown__item">
//         <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
//         <a href="#" class="lego-dropdown__block-link">Another Link</a>
//       </li>
//     </ul>
//   </div>
// </div>

// ### Dropdown with Filter

// <div class="example html">
//   <div class="lego-dropdown-group" v-dropdown>
//     <button class="lego-button" data-toggle-dropdown>
//       Dropdown <span class="lego-arrow-inline--down"></span>
//     </button>
//     <ul class="lego-dropdown">
//       <li class="lego-dropdown__item">
//         <form class="soft-half--ends">
//             <input type="text" class="lego-text-input lego-text-input--search">
//         </form>
//       </li>
//       <li class="lego-dropdown__item">
//         <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
//       </li>
//     </ul>
//   </div>
// </div>

// ### Dropdown inside Input

// <div class="example html">
//   <div class="lego-dropdown-group" v-dropdown>
//     <input type="text" class="lego-text-input" data-toggle-dropdown />
//     <ul class="lego-dropdown">
//       <li class="lego-dropdown__item">
//         <a href="#" class="lego-dropdown__block-link">Item One</a>
//         <a href="#" class="lego-dropdown__block-link">Item Two</a>
//       </li>
//     </ul>
//   </div>
// </div>

// [---]

.#{$namespace}dropdown-group {
  font-size: map-fetch($font, size base);
  display: inline-block;
  position: relative;
  vertical-align: top;

  &.shown {
    .#{$namespace}dropdown {
      visibility: visible;
    }
  }
}

%#{$namespace}dropdown,
.#{$namespace}dropdown {
  @extend %#{$namespace}block-list-group;
  background: map-fetch($color, background white);
  box-shadow: 0 2px map-fetch($shadow, light);
  min-width: 100%;
  position: absolute;
  top: 100%;
  left: auto;
  z-index: 1;
  margin-top: 2px;
  text-align: left;
  visibility: hidden;

  &__item {
    white-space: nowrap;
    color: map-fetch($color, text base);

    &--active {
      background: map-fetch($color, background faint);
    }
  }

  &__block-link {
    @extend %#{$namespace}block-list__link;
  }

  &--right {
    right: 0;
    left: auto;
  }
}