.dropdown {
  @include border-radius(3px);
  background: lighten($text,20%);
  display: inline-block;
  position: relative;
  float: right;
  text-align: right;
  font-size: 0.85em;
  z-index: 999;
  top: 20px;
  padding: 5px 12px;
  margin-right: 7px;

  i {
    font-size: 1.2em;
  }

  .dropdown-name {
    width: 250px;
    color: white;

    i {
      margin-left: 7px;
      position: relative;
      top: -2px;
    }

    .icon-cog {
      margin-left: 0;
      margin-right: 7px;
      top: 0px;
    }
  }

  ul {
    position: absolute;
    right: 0;
    display: none;

    li {
      background: white;
      width: 250px;
      padding: 5px;
      text-align: left;
      border: 1px solid #ccc;
      border-bottom: none;
      margin: 0;

      &:last-child {
        border-bottom: 1px solid #ccc;
      }

      a {
        display: block;
      }

      &:hover {
        background: $link;
        
        a, i {
          text-decoration: none;
          color: white;
        }
      }
    }
  }

  &:hover {
    ul {
      display: block;
    }
  }

  div {
    display: inline-block;
    margin: 0 5px;
  }
}