.dropdown_menu {
  display: inline;

  .dropdown_menu_button {
    @include light-button;
    position: relative;
    padding-right: 22px !important;
    cursor: pointer;

    &:before {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border-width: 3px 3px 0;
      border-style: solid;
      border-color: #FFF transparent;
      right: 12px;
      top: 45%;
    }

    &:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      border-width: 3px 3px 0;
      border-style: solid;
      border-color: #777 transparent;
      right: 12px;
      top: 45%;
    }
  }

  .dropdown_menu_nipple {

    // The nipple's border    
    content: "";
    position: absolute;
    top: -6px;
    display: block;
    width: 0;  
    height: 0;  
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: darken($primary-color, 4%) transparent; 
    z-index: 100;

    // The nipple's inner shadow 

    &:before {
      content: ' ';  
      position: absolute;  
      width: 0;  
      height: 0;  
      border-width: 0 5px 5px;
      border-style: solid;
      border-color: lighten($primary-color, 15%) transparent;
      left: -5px;
      top: 1px;
    }

    // The nipple's background color

    &:after {
      content: ' ';  
      position: absolute;  
      width: 0;  
      height: 0;  
      border-width: 0 5px 5px;
      border-style: solid;
      border-color: lighten($primary-color, 4%) transparent;
      left: -5px;
      top: 2px;
    }
  }

  .dropdown_menu_list_wrapper {
    display: inline-block;
    position: absolute;
    background-color: white;
    padding: 2px;
    box-shadow: rgba(0,0,0,0.4) 0 1px 3px, lighten($primary-color, 15%) 0px 1px 0px 0px inset;
    background-color: $primary-color;
    @include gradient(lighten($primary-color, 4%), darken($primary-color, 5%));
    border: solid 1px darken($primary-color, 10%);
    border-top-color: darken($primary-color, 4%);
    border-bottom-color: darken($primary-color, 17%);

    border-radius: 4px;

    .dropdown_menu_list {
      display: block;
      background-color: #FFF;
      border: solid 1px darken($primary-color, 10%);    
      box-shadow: lighten($primary-color, 5%) 0px 1px 0px 0px;    
      border-radius: 3px;
      margin: 0;
      overflow: hidden;
      padding: 8px;

      list-style-type: none;
      padding: 0;

      li {
        display: block;
        border-bottom: solid 1px #ebebeb;
        @include box-sizing(border-box);

        a {
          display: block;
          @include box-sizing(padding-box);        
          font-size: 0.95em;
          font-weight: bold;
          padding: 7px 16px 5px;
          text-decoration: none;
          text-align: center;
          -webkit-font-smoothing: antialiased;

          &:hover {
            @include highlight-gradient;
            @include text-shadow(#5a83aa);
            color: #FFF;
          }

          &:active {
            @include reverse-highlight-gradient;
            color: #FFF;
          }

        }

        &:first-child {
          a {
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
          }

        }

        &:last-child {
          a {
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
          }
          border: none;
        }
      }
    }
  }
}