.menu {
  font-family: var(--Topbar_fontFamily); /* should come from topbar */
  cursor: default;

  &:focus,
  & :focus {
    outline: none;
    color: var(--Menu_textColorFocus);
  }

  &:focus,
  &.openMenu,
  &.openOnHover:hover {
    & .menuLabel {
      color: var(--Menu_textColorFocus);
    }

    & .menuLabelIcon g,
    & .menuLabelDropdownIcon path {
      fill: var(--Menu_textColorFocus);
    }
  }

  &.openMenu,
  &.openOnHover:hover {
    & .menuContent {
      visibility: visible;
      transition-delay: 0ms;
    }
  }
}

.menuLabel {
  display: inline-block;
  padding: var(--Menu_labelPaddingVertical) 0;
  color: var(--Menu_textColor);
  font-size: var(--Menu_fontSize);
  line-height: 1em;
  white-space: nowrap;

  &::first-letter {
    text-transform: capitalize;
  }
}

.menuLabelIcon {
  margin-right: var(--Menu_iconPadding);
}

.menuLabelDropdownIcon {
  margin-left: 0.2857em;
}

.menuLabelDropdownIconOpen {
  composes: menuLabelDropdownIcon;
  display: none;
}

.menu.openMenu .menuLabelDropdownIconOpen,
.menu.openOnHover:hover .menuLabelDropdownIconOpen {
  display: inline-block;
}

.menuLabelDropdownIconClosed {
  composes: menuLabelDropdownIcon;
  display: inline-block;
}

.menu.openMenu .menuLabelDropdownIconClosed,
.menu.openOnHover:hover .menuLabelDropdownIconClosed {
  display: none;
}

.menuContent {
  visibility: hidden;
  z-index: var(--Menu_zIndex);
  background-color: var(--Menu_colorBackground);
  border: 1px solid var(--Menu_borderColor);
  border-radius: 3px;
  position: absolute;
  box-shadow: var(--Menu_boxShadow);

  /* 3rd child is the first child after arrow - i.e. first menu item */
  & :nth-child(3) {
    border-top-left-radius: 3px;
  }

  & :last-child {
    border-bottom-left-radius: 3px;
  }
}

.transitionDelay {
  transition: visibility 0ms;
  transition-delay: 300ms;
}

.menuContentArrowTop,
.menuContentArrowBelow {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.menuContentArrowTop {
  border-color: transparent;
  border-bottom-color: var(--Menu_colorBackground);
  border-width: 7px;
  margin-left: -7px;
}

.menuContentArrowBelow {
  border-color: transparent;
  border-bottom-color: var(--Menu_borderColor);
  border-width: 9px;
  margin-left: -9px;
}