header {
  background-color: $primary-color;
  text-align: right;
  height: $navbar-height-mobile;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: $z-index-header;

  h2 { float: left; margin: 0; }
  h2, a, .material-icons {
    color: $navbar-font-color;
    display: inline-block;
    font-size: 2rem;
    height: $navbar-height-mobile;
    line-height: $navbar-height-mobile;
  }

  a, svg, .material-icons {
    vertical-align: middle;
  }

  a { padding-left: 10px; padding-right: 10px; }
  a.active { background: darken($primary-color, 5%); }
  a.btn-floating { vertical-align: text-bottom; }
  a.btn-floating i {
    font-size: 1em;
    height: 1em;
    width: 37px;
    line-height: 37px;
  }

  .input-field {
    height: 100%;
    padding: 0 $gutter-width;
    margin: 0;
    margin-right: $gutter-width / 2;
    width: $main-menu-width;
    float: left;

    @media #{$medium-and-down} { display: none; }

    input[type="search"] {
      font-size: 1.2rem;
      height: 100%;
      width: 100%;
      border: none;
      margin: 0;
      padding-left: 1rem;

      &, &:focus { color: $navbar-font-color; }

      &:focus, &[type=text]:valid {
        background: transparent;
        border: none;
        box-shadow: none;
      }
    }

    input[type="search"] + label {
      top: 0;
      left: $gutter-width / 2;

      i { font-size: 24px; color: rgba(255,255,255,.7); transition: color .3s; }
      &.active { transform: translateY(0); }
    }
    input[type="search"]:focus + label i {
      color: $navbar-font-color;
    }
  }

  @media #{$large-and-up} {
    height: $navbar-height;

    h2, a, .material-icons {
      height: $navbar-height;
      line-height: $navbar-height;
    }
  }

  @media #{$medium-and-down} {
    a.toggle-main-menu { margin-right: $gutter-width / 2; }
  }

  @include input-placeholder-color(lighten($primary-color, 20%));

  .convos-icon {
    fill: $navbar-font-color;
  }
}

a.toggle-main-menu {
  @extend .hide-on-large-only;
  float: left;
}

.convos-dialog-container,
.convos-settings {
  header h2 {
    padding-left: $gutter-width / 2;
  }
}

.under-main-menu {
  padding-top: $navbar-height-mobile;

  @media #{$large-and-up} {
    padding-top: $navbar-height;
  }

  &.max-height {
    height: 100vh;
    overflow: hidden;
  }
}

body.notouch header {
  a:hover { background: lighten($primary-color, 5%); }
}

body.no-header {
  header {
    display: none;
  }
}

body.no-menu {
  header {
    padding-left: $gutter-width;
    .input-field { display: none; }
  }
}

body.no-sidebar {
  .convos-header-links { display: none !important; }
}
