.header {
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #fff;
  border-bottom: 1px solid $colour-grey-light;
  min-height: 1px;

  &::before,
  &::after {
    content: ' ';
    display: table;
  }

  &::after {
    clear: both;
  }
}

.header__logo {
  float: left;
}

.header__nav {
  float: right;
  text-align: right;
}

.header__hamburger {
  display: inline-block;
  padding-top: 10px;
}

.header__hamburger-close {
  display: none;
}

.header__nav-x,
.header__profile {
  display: none;
}

.header__profile {
  padding-top: 5px;
}

.header__profile-link {
  font-size: 14px;
  font-weight: $font-weight-regular;
}

.header__profile-pic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

.header__fly-out {
  padding-top: 1em;
}

.header__profile-nav-head {
  display: block;
  padding: 1em;
}

@media (min-width: $breakpoint-medium) {
  .header__profile {
    display: inline-block;
  }

  .header__hamburger--signed-in,
  .header__profile-nav-head {
    display: none;
  }
}

@media (min-width: $breakpoint-xlarge) {
  .header__hamburger--signed-out {
    display: none;
  }

  .header__nav-x {
    display: block;
    white-space: nowrap;
  }
}