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

.menuWrapper {
  position: absolute;
  width: auto;
  height: 2.5rem;
  z-index: 11;
}

.menu {
  width: auto;
  height: 100%;
  background: white;
  box-shadow: $box-shadow;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
}

.menuItem {
  width: auto;
  min-width: 4rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .75rem;
  font-size: 0.875rem;
  font-family: $accent;
  font-weight: 700;
  border-right: 1px solid $secondary;
  img {
      width: 100%;
      height: 100%;
      max-width: 1rem;
      max-height: 1.125rem;
  }
}

.menuItem:last-of-type {
    border-right: none;
}

.menuItem:hover {
    background: $tertiary;
    cursor: pointer;
}

.menuItem:first-of-type:hover {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.menuItem:last-of-type:hover {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}