.dropdown_menu {
  display: inline;

  .dropdown_menu_button {
    @extend %btn;
    padding-right: 22px !important;
    position: relative;

    &: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: gray transparent;
    z-index: 100;

    // The nipple's inner shadow

    &:before {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      left: -5px;
      top: 1px;
    }

    // The nipple's background color

    &:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      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;
    background-color: white;
    border-radius: 4px;
    z-index: 101;

    .dropdown_menu_list {
      display: block;
      background-color: #FFF;
      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;
        }

        &: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;
        }
      }
    }
  }
}