/* Header */

  body {
    padding-top: 3.125em;
  }

  #header {
    background: darken(_palette(accent2, bg), 12);
    color: _palette(accent2, fg);
    cursor: default;
    height: 3.50em;
    left: 0;
    line-height: 3.50em;
    position: fixed;
    text-align: left;
    top: 0;
    width: 100%;
    z-index: _misc(z-index-base) + 1;
    @include noSelect();

    > h1 {
      color: _palette(accent2, fg-bold);
      display: inline-block;
      height: inherit;
      line-height: inherit;
      margin: 0;
      padding: 0;

      a {
        font-size: 1.25em;
      }
    }

    > a {
      @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
      display: inline-block;
      padding: 0 0.75em;
      color: inherit;
      text-decoration: none;

      &:hover {
        color: _palette(accent2, fg-bold);
      }

      &[href="#nav"] {
        @include icon('\f013');
        -webkit-tap-highlight-color: rgba(0,0,0,0);

        &:before {
          margin: 0 0.5em 0 0;
        }
      }

      & + a[href="#nav"]:last-child {
        border-left: solid 1px _palette(accent2, border);
        padding-left: 1.25em;
        margin-left: 0.5em;
      }

      &[href="#stats"] {
        @include icon('\f080');
        -webkit-tap-highlight-color: rgba(0,0,0,0);

        &:before {
          margin: 0 0.5em 0 0;
        }
      }

      & + a[href="#stats"]:last-child {
        border-left: solid 1px _palette(accent2, border);
        padding-left: 1.25em;
        margin-left: 0.5em;
      }

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

        & + a[href="#nav"]:last-child {
          padding-left: 1em;
          margin-left: 0.25em;
        }

        & + a[href="#stats"]:last-child {
          padding-left: 1em;
          margin-left: 0.25em;
        }
      }

      @include breakpoint(xsmall) {
        & > .label {
          display: none;
        }
      }
    }
  }

  @include breakpoint(medium) {
    body {
      padding-top: 44px;
    }

    #header {
      height: 44px;

      > h1 {
        left: 1em;

        a {
          font-size: 1em;
        }
      }
    }
  }

  @include breakpoint(xsmall) {
    #header {
      min-width: 320px;
    }
  }