// Dropdowns
//
// Located in `wyrm_core/_dropdown.sass`.
//
// Markup:
// <div class="wy-dropdown wy-dropdown-bubble {$modifiers}">
//   <span class="btn btn-info fa fa-check-circle"> Save... <span class="caret"></span></span>
//   <dl class="wy-dropdown-menu">
//     <dd><a href="">Save it as a draft</a></dd>
//     <dd><a href="">Publish now </a></dd>
//     <dd><a href="">Publish at a specific time</a></dd>
//   </dl>
// </div>
//
// .wy-dropdown-active        - Active class. You'd want to turn on/off through JS.
//
// Styleguide 8

.wy-dropdown
  position: relative
  display: inline-block
  .caret
    @extend %icon
    @extend .#{$icon-prefix}-#{$icon-caret-down}
.wy-dropdown-active .wy-dropdown-menu
  display: block
.wy-dropdown-menu
  position: absolute
  left: 0
  display: none
  float: left
  top: 100%
  min-width: 100%
  background: $dropdown-color
  z-index: $z-index-dropdown
  border: solid 1px $dropdown-border-color
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)
  padding: $base-line-height / 2
  > dd > a
    display: block
    clear: both
    color: $text-color
    white-space: nowrap
    font-size: 90%
    padding: 0 $base-line-height / 2
    cursor: pointer
    &:hover
      background: $link-color
      color: $white
  > dd.divider
    border-top: solid 1px $dropdown-border-color
    margin: $base-line-height / 4 0
  > dd.search
    padding-bottom: $base-line-height / 2
    input[type="search"]
      width: 100%
  > dd.call-to-action
    background: darken($dropdown-color, 10%)
    text-transform: uppercase
    font-weight: 500
    font-size: 80%
    &:hover
      background: darken($dropdown-color, 10%)
    .btn
      color: $white

.wy-dropdown.wy-dropdown-up .wy-dropdown-menu
  bottom: 100%
  top: auto
  left: auto
  right: 0

.wy-dropdown.wy-dropdown-bubble
  .wy-dropdown-menu
    background: $section-background-color
    margin-top: 2px
  .wy-dropdown-menu a
    padding: $base-line-height / 4 $base-line-height / 2
    &:hover
      background: $link-color
      color: $white

.wy-dropdown.wy-dropdown-left .wy-dropdown-menu
  right: 0
  left: auto
  text-align: right

.wy-dropdown-arrow
  &:before
    content: " "
    border-bottom: 5px solid hsla(0,0%,96%,1)
    border-left: 5px solid transparent
    border-right: 5px solid transparent
    position: absolute
    display: block
    top: -4px
    left: 50%
    margin-left: -3px
  &.wy-dropdown-arrow-left:before
    left: 11px

