tningjs/sam-and-his-friends

///
/// Future Imperfect by Pixelarity
/// pixelarity.com | hello@pixelarity.com
/// License: pixelarity.com/license
///

/* Header */

body {
  padding-top: 3.5em;
}

#header {
  @include vendor('display', 'flex');
  @include vendor('justify-content', 'space-between');
  background-color: _palette(bg);
  border-bottom: solid 1px _palette(border);
  height: 3.5em;
  left: 0;
  line-height: 3.5em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: _misc(z-index-base);

  a {
    color: inherit;
    text-decoration: none;
  }

  ul {
    list-style: none;
    margin: 0;
    padding-left: 0;

    li {
      display: inline-block;
      padding-left: 0;
    }
  }

  h1 {
    height: inherit;
    line-height: inherit;
    padding: 0 0 0 1.5em;
    white-space: nowrap;

    a {
      font-size: 0.7em;
    }
  }

  .links {
    @include vendor('flex', '1');
    border-left: solid 1px _palette(border);
    height: inherit;
    line-height: inherit;
    margin-left: 1.5em;
    overflow: hidden;
    padding-left: 1.5em;

    ul {
      li {
        border-left: solid 1px _palette(border);
        line-height: 1;
        margin-left: 1em;
        padding-left: 1em;

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

        a {
          border-bottom: 0;
          font-family: _font(family-heading);
          font-size: 0.7em;
          font-weight: _font(weight-heading);
          letter-spacing: _font(kerning-heading);
          text-transform: uppercase;
        }
      }
    }
  }

  .main {
    height: inherit;
    line-height: inherit;
    text-align: right;

    ul {
      height: inherit;
      line-height: inherit;

      li {
        border-left: solid 1px _palette(border);
        height: inherit;
        line-height: inherit;
        white-space: nowrap;

        > * {
          display: block;
          float: left;
        }

        > a {
          @include icon;
          border-bottom: 0;
          color: _palette(fg-light);
          overflow: hidden;
          position: relative;
          text-indent: 4em;
          width: 4em;

          &:before {
            display: block;
            height: inherit;
            left: 0;
            line-height: inherit;
            position: absolute;
            text-align: center;
            text-indent: 0;
            top: 0;
            width: inherit;
          }
        }
      }
    }
  }

  form {
    margin: 0;

    input {
      display: inline-block;
      height: 2.5em;
      position: relative;
      top: -2px;
      vertical-align: middle;
    }
  }

  #search {
    @include vendor('transition', 'all 0.5s ease');
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;

    input {
      width: 12em;
    }

    &.visible {
      max-width: 12.5em;
      opacity: 1;
      padding: 0 0.5em 0 0;
    }
  }

  @include breakpoint('<=medium') {
    .links {
      display: none;
    }
  }

  @include breakpoint('<=small') {
    height: 2.75em;
    line-height: 2.75em;

    h1 {
      padding: 0 0 0 1em;
    }

    .main {
      .search {
        display: none;
      }
    }
  }
}