.Header-left  {
  & .Header-entry {
    /* Reset default margins from Header because we use buttons that already have padding */
    margin: 0;
  }

  & .Button {
    /* Reduce spacing between nav menus */
    padding-left: var(--space);
    padding-right: var(--space);
  }

  & .LogoLink {
    /* Still a Link so needs some padding added for consistency with menus to the right */
    padding: var(--space);
  }

  & .Header-entry:first-child {
    padding-bottom: 7px; /* align logo baseline with menu names */
  }
}

.Header-right .Header-entry {
  /* Reset default margins from Header because it messes up our dynamic right section */
  margin-right: 0;
  &:nth-child(2) {
    margin-right: 0;
  }

  /* And space the items using left margin instead */
  margin-left: var(--space-2x);
}

.UserMenu > .Button {
  /* Decrease spacing between avatar and Create button */
  padding: 10px 5px 10px 10px;
}

.Menu-list {
  text-align: left; /* needed to stop menu entries from centering */
  min-width: 235px;
  z-index: 10;
}

.CreatePollMenu-createButton .Button-contentWrapper {
  /* The contentWrapper puts itself in-between the Button and its children so
     we have to reach in and force it to a flexbox to be able to align our
     icon with the text. 🤷🏻‍♂️ */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

/* These selectors target IE11 exclusively. Hacky fixes for misalignment in header. */
_:-ms-fullscreen,
:root .Header .CreatePollMenu-createButton.CreatePollMenu-createButton { /* specificity override */
  padding-top: 0px;
}

_:-ms-fullscreen,
:root .Header .Button {
  padding-top: 8px;
}

@media (--small-device) {
  .HeaderWidget,
  .CreatePollMenu-createMenuLabel {
    display: none;
  }

  .Navigation-hamburgerMenu {
    display: inline-block;
  }
}

@media (--medium-device) {
  .HeaderWidget,
  .CreatePollMenu-createMenuLabel {
    display: none;
  }

  .Navigation-hamburgerMenu {
    display: inline-block;
  }

  /* Keep top nav links hidden longer than Header specifies */
  .Header-left .Header-entry:not(:first-child),
  .Header-right .Header-entry .Button:not(:first-child) {
    display: none;
  }
}

@media (min-width: 1024px) {
  .HeaderWidget,
  .CreatePollMenu-createMenuLabel {
    display: block;
  }

  .HeaderWidget-signupButton {
    display: none;
  }

  .Navigation-hamburgerMenu {
    display: none;
  }

  .Header-left .Header-entry:not(:first-child),
  .Header-right .Header-entry .Button:not(:first-child) {
    display: flex;
  }
}

@media (min-width: 1100px) {
  .HeaderWidget-signupButton {
    display: inline-flex;
    margin-right: var(--space);
  }
}