/* Header */

#header {
  @include vendor('transition', 'background-color #{_duration(transitions)} ease');
  background: _palette(bg);
  height: 3em;
  left: 0;
  line-height: 3em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: _misc(z-index-base);

  h1 {
    @include vendor('transition', 'opacity #{_duration(transitions)} ease');
    height: inherit;
    left: 1.25em;
    line-height: inherit;
    position: absolute;
    top: 0;

    a {
      border: 0;
      display: block;
      height: inherit;
      line-height: inherit;

      @include breakpoint(small) {
        font-size: 0.8em;
      }
    }
  }

  nav {
    height: inherit;
    line-height: inherit;
    position: absolute;
    right: 0;
    top: 0;

    > ul {
      list-style: none;
      margin: 0;
      padding: 0;
      white-space: nowrap;

      > li {
        display: inline-block;
        padding: 0;

        > a {
          border: 0;
          color: _palette(fg-bold);
          display: block;
          font-size: 0.8em;
          letter-spacing: _size(letter-spacing-alt);
          padding: 0 1.5em;
          text-transform: uppercase;

          &.menuToggle {
            outline: 0;
            position: relative;

            &:after {
              background-image: url('images/bars.svg');
              background-position: right center;
              background-repeat: no-repeat;
              content: '';
              display: inline-block;
              height: 3.75em;
              vertical-align: top;
              width: 2em;
            }

            @include breakpoint(small) {
              padding: 0 1.5em;

              span {
                display: none;
              }
            }
          }

          @include breakpoint(small) {
            padding: 0 0 0 1.5em;
          }
        }

        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  &.alt {
    background: transparent;

    h1 {
      @include vendor('pointer-events', 'none');
      opacity: 0;
    }
  }
}