.dropdown
  ///////////////////////////////////////////////////////////////////////////////////
  $base-border-color: gainsboro !default
  $base-border-radius: 3px !default
  $base-line-height: 1.5em !default
  $base-background-color: white !default
  $dark-gray: #333 !default
  $large-screen: em(860) !default
  $base-font-color: $dark-gray !default
  line-height: $base-line-height
  ul
    padding: 0
    margin: 0
  li
    list-style: none
  //////////////////////////////////////////////////////////////////////////////////
  $dropdown-color: $base-font-color
  $dropdown-description-color: lighten($dropdown-color, 40%)
  $dropdown-border: 1px solid silver
  $dropdown-background: $base-background-color
  $dropdown-background-hover: darken($dropdown-background, 3%)
  $dropdown-inner-border: 1px solid silver
  $dropdown-height: 40px
  $dropdown-padding: 1em
  $dropdown-distance-from-menu: 50px
  $dropdown-arrow-top-distance: 0
  .dropdown-container
    display: inline-block
    position: relative
    text-align: center
  .dropdown-description
    background: $dropdown-background
    border-bottom-left-radius: $base-border-radius
    border-bottom: $dropdown-border
    border-left: $dropdown-border
    border-top-left-radius: $base-border-radius
    border-top: $dropdown-border
    color: $dropdown-description-color
    float: left
    font-size: 0.7em
    line-height: $dropdown-height
    margin: 0
    padding: 0 ($dropdown-padding / 2) 0 $dropdown-padding
    +media($large-screen)
      font-size: 1em
  .dropdown-button
    background: $dropdown-background
    border-bottom-right-radius: $base-border-radius
    border-top-right-radius: $base-border-radius
    border-top: $dropdown-border
    border-right: $dropdown-border
    border-bottom: $dropdown-border
    cursor: pointer
    float: right
    font-size: 0.7em
    font-weight: 800
    line-height: $dropdown-height
    margin: 0
    padding: 0 ($dropdown-padding * 2.5) 0 ($dropdown-padding / 2)
    position: relative
    +media($large-screen)
      font-size: 1em
      padding: 0 ($dropdown-padding * 2.5) 0 ($dropdown-padding / 2)
  .dropdown-button:hover
    background-color: $dropdown-background-hover
  .dropdown-button:after
    color: $base-font-color
    content: "\25BE"
    display: block
    position: absolute
    right: $dropdown-padding
    top: $dropdown-arrow-top-distance
  .dropdown-menu
    +transition(all 0.2s ease-in-out)
    background: $dropdown-background
    border-radius: $base-border-radius
    border: $dropdown-border
    box-shadow: 0 2px 2px transparentize(black, 0.8)
    color: $dropdown-color
    cursor: pointer
    display: none
    overflow: show
    position: absolute
    right: 0
    top: $dropdown-distance-from-menu
    width: 228px
    z-index: 99999
    &:before
      +position(absolute, 0 1em 0 0)
      color: $dropdown-background
      content: "\25b2"
      font-size: 1.4em
      pointer-events: none
      text-shadow: 0 -2px 2px transparentize(black, 0.7)
      top: -0.7em
  .dropdown-menu li
    border-bottom: $dropdown-inner-border
    color: $dropdown-color
    padding: $dropdown-padding / 2
  .dropdown-menu li:hover
    background: $dropdown-background-hover
  .dropdown-menu li:first-child
    border-top-left-radius: $base-border-radius
    border-top-right-radius: $base-border-radius
  .dropdown-menu li:last-child
    border: none
    border-bottom-left-radius: $base-border-radius
    border-bottom-right-radius: $base-border-radius
  .show-menu
    display: block

// Inspired by code by www.HUSAMUI.com