// DOC HEADER
// -----------------------------------------------
// -----------------------------------------------
.doc-header {
  @include flexbox;
  @include justify-content(space-between);
  @include align-items(center);

  height: ($base-point-grid * 11);
  padding: 0 ($base-point-grid * 4) 0 ($base-point-grid * 1);
  background: $white;

  .search-wrapper {
    flex: 1 1 auto;
    position: relative;

    &::after {
      color: $brand-primary;
      content: "\f002";
      display: block;
      font-family: FontAwesome;
      font-size: 1rem;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }

    .search {
      display: block;
      width: calc(100% - 1.5rem);
      padding: $base-point-grid 0;
      font-family: $base-font-family;
      font-size: $base-font-size;
      color: $brand-secondary;
      margin-left: 1.5rem;
      border: none;
      cursor: auto;
      position: relative;
    }

    /* clears the 'X' from Internet Explorer */
    input[type="search"]::-ms-clear {
      display: none;
      width: 0;
      height: 0;
    }

    input[type="search"]::-ms-reveal {
      display: none;
      width: 0;
      height: 0;
    }

    /* clears the 'X' from Chrome */
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
      display: none;
    }
  }

  a {
    &:hover {
      text-decoration: none;
    }
  }

  .fa {
    margin-right: ($base-point-grid / 2);
  }
}
