// Generic dropdowns (i.e. elements with the '.dropdown' class
// and containing one <ul class='.dropdown-menu'> element)

.dropdown {
  position: relative;
  display: inline-block;
}

ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  z-index: 1;
  margin: auto 0;
  padding: 0;
  list-style: none;
}

ul.dropdown-menu li {
  padding: 12px 16px;
}

ul.dropdown-displayed {
  @include flex;
  flex-direction: column;
}

ul.dropdown-right {
  top: 0;
  left: 100%;
}

ul.dropdown-left {
  top: 0;
  right: 100%;
}
