skyderby/skyderby

.header {
  width: 100%;
  height: 70px;
  overflow: hidden;
  position: fixed;
  background: $nav-background;
  z-index: 3;

  transition: all 500ms ease-in-out;
  transition-delay: 0;
}

.header__spacer {
  width: 100%;
  height: 70px;
}

.header__bar {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 25px 0 20px;
  background: $nav-background-light;
}

.header__home {
  color: #fff;
  font-size: 25px;
  font-weight: 200;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-direction: row;
  position: relative;
  z-index: 1;

  span {
    opacity: 1;
  }

  &:before {
    content: $icon-skyderby;
    color: #fff;
    font: 38px $application-icon-font;
    margin: 0 15px 0 0;
  }

  &:hover {
    color: #fff;
    text-decoration: none;
  }
}

.header__notifications-toggle {
  width: 15px;
  height: 17px;
  margin-right: 12.5px;
  display: block;
  position: relative;

  &.active {
    &:before {
      display: block;
    }
  }

  &:before {
    content: '';
    width: 4px;
    height: 4px;
    display: none;
    border-radius: 10px;
    border: 2px solid $nav-background;
    background: $blue;
    position: absolute;
    top: 0px; right: -1px;
    margin: 0 !important;
    z-index: 2;
  }

  &:after {
    content: $icon-notification;
    font: 18px/18px $application-icon-font;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    margin-top: 1px;
    position: relative;
    z-index: 1;
  }
}

.header__menu-toggle {
  width: 24px;
  height: 24px;
  display: block;
  margin-left: 12.5px;
  position: relative;
  z-index: 5;
  opacity: 1;
  transition: all 250ms ease-in-out;

  &:before {
    content: '';
    width: 24px;
    height: 2px;
    display: block;
    position: absolute;
    top: 7px;
    left: 0;
    background: #fff;
    transform: rotate(0deg);
    transition: all 200ms ease-in-out;
    transition-delay: 0;
  }

  &:after {
    content: '';
    width: 24px;
    height: 2px;
    display: block;
    position: absolute;
    bottom: 7px; left: 0;
    background: #fff;
    transform: rotate(0deg);
    transition: all 200ms ease-in-out;
    transition-delay: 0;
  }

  &.active {
    opacity: 0;
  }
}

.header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__page-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,.8);
  transition: opacity 350ms ease-in-out;
  z-index: 10;

  &.overlay--hidden {
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
  }
}