.HamburgerMenu-menu {
  position: absolute;
  right: 0;
  z-index: 10;
  min-width: 300px;
  margin: 2px 0 0 0;
  padding: 0;

  background-color: white;
  border: 1px solid var(--color-neutral-300);
  border-radius: 3px;
  box-shadow: var(--shadow-2);

  list-style: none;
  text-align: left;
}

.SubmenuHead {
  position: relative;
  color: var(--color-neutral-text);
}

.SubmenuHead-toggleSubmenuButton {
  position: absolute;

  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  padding: 0;

  border: none;
  background-color: transparent;

  &:hover {
    background-color: var(--color-brand-200);
  }

  &:focus {
    outline: 0;
  }
}

.u-separatorBefore {
  border-top: solid var(--color-neutral-300) 1px;
}

.u-indented {
  padding-left: var(--space-5x);
}

.u-noPointer {
  cursor: default;
}

.UserArea {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-2x) var(--space-3x);
  background-color: var(--color-neutral-100);
  border: solid var(--color-neutral-300) 1px;
}

.UserArea :global(.display-small) {
  font-weight: var(--font-weight-bold);
}

.UserArea-buttonRow {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  justify-content: center;
  align-items: center;
}

.UserArea-signupButton {
  margin-right: var(--space-2x);
}

.UserArea-userRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--space);
}

.UserArea-userName {
  margin-left: 7px;
}

.Header-right .Header-entry .Button:not(:first-child) {
  /* Needed to revert a misguided display: none from the Header.css */
  display: inline-flex;
}