/*

Dropdowns

Toggleable, contextual menu for displaying lists of links. Made interactive with the [dropdown JavaScript plugin](http://twitter.github.io/bootstrap/javascript.html#dropdowns).

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within `.dropdown`. Then just create the menu.

Script required:

    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>

Markup:
<div class="dropdown">
  <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
    Dropdown
    <span class="dropdown__caret"></span>
  </a>
  <ul class="dropdown__menu ">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
<div class="dropdown">
  <a href="#" class="btn btn--default dropdown__toggle " data-toggle="dropdown">
    Dropdown
    <span class="dropdown__caret"></span>
  </a>
  <ul class="dropdown__menu pull-right ">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>



Styleguide 7

*/

@if $dropdowns {

    .dropdown,
    .dropdown__toggle {
        position: relative;
        display: inline-block;
    }

    .dropdown__toggle:focus { outline: 0; }

/*

Dropdown arrow/caret

A simple helper class is available to add an arrow for the dropdown button.

Markup: <span class="dropdown__caret"></span>

Styleguide 7.1

*/

    .dropdown__caret {
        @extend %caret !optional;
    }

/*

Dropdown menu

List of the links to show in the dropdown.


    <ul class="dropdown__menu ">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>

Styleguide 7.2

*/

    .dropdown__menu {
        @extend %dropdown !optional;
        @extend .transition;
        @include border-bottom-radius($base-border-radius);
        @include opacity(0);
        @include position(absolute, 100% 0 0 0px);
        border-style: solid;
        border-width: $input-border;
        display/*\**/: none\9; // Ugly IE8 Hack
        float: left;
        list-style: none;
        margin: -$input-border 0 0 0;
        max-height: 0;
        min-width: 10em;
        overflow: hidden;
        z-index: $zindex-dropdown;

        &[data-content] { min-width: em(600px); }

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

        // Links list inside the dropdown
        > li > a,
        > li > label {
            clear: both;
            display: block;
            font-weight: normal;
            white-space: nowrap;
        }

        > li > a { padding: $dropdowns-padding;}
        > li > label { padding: nth($dropdowns-padding, 1) nth($dropdowns-padding, 2) nth($dropdowns-padding, 1) (nth($dropdowns-padding, 2) + em($checkbox-padding-left) ) ;}

        > li:last-child > a,
        > li:last-child > label {
            border-bottom: 0;
        }

    }

    .dropdown__menu > li > a:hover,
    .dropdown__menu > li > a:focus {
        text-decoration: none;
    }

    .dropdown__menu > .active > a,
    .dropdown__menu > .active > a:hover,
    .dropdown__menu > .active > a:focus {
        text-decoration: none;
        outline: 0;
    }

    .dropdown__menu > .disabled > a,
    .dropdown__menu > .disabled > a:hover,
    .dropdown__menu > .disabled > a:focus {
        color: $grayLight;
    }

    .dropdown__menu > .disabled > a:hover,
    .dropdown__menu > .disabled > a:focus {
        text-decoration: none;
        background-color: transparent;
        background-image: none;
        cursor: default;
    }

// Dropdown open

    .dropdown.open {
        z-index: $zindex-dropdown ;

        .dropdown__toggle {
            @extend %dropdown--open !optional;
            @include border-bottom-radius(0 !important);
            z-index: $zindex-dropdown + 1;
        }

        .dropdown__menu {
            @include opacity(1);
            display/*\**/: block\9; // Ugly IE8 Hack
            max-height: $dropdowns-height;
        }

    }


}