@import "../../styles/variables.scss";

.container {
  outline: none;
  .trigger {
    outline: none;
  }
  position: relative;
  display: inline-block;
}

.content {
  border: $base-border;
  position: absolute;
  background-color: $brand-white;
  border-radius: $base-border-radius;
  z-index: 999;
}

.trigger {
  cursor: pointer;
}

.contentLeft {
  right: 0px;
}

.content.show {
  display: block;
}

.menuItem {
  padding: $base-spacing;
  cursor: pointer;
  white-space: nowrap;
}

.menuItem:hover {
  color: $brand-blue-hover;
}

.menuItems {
  padding: $base-spacing;
  margin: 0px;
  display:inline-block;
  list-style-type: none;
}

.faIcon {
  margin-right: 10px;
}

.enter {
  opacity: 0;
  transform: translateY(-10px);
}

.enterRight {
  opacity: 0;
  transform: translateX(-10px);
}

.enterActiveRight {
  opacity: 1;
  transform: translateX(0);
  transition: all 150ms ease-in;
}

.enterActive {
  opacity: 1;
  transform: translateY(0);
  transition: all 150ms ease-in;
}