_header.scss

// @file
// Styles for Header Layout.
$site-name-bg: gesso-grayscale(gray-2);

.uw-header {
  @include uw-full-width;
  background-color: #000;

  &__masthead {

    display: flex;
    font-family:gesso-font-family(condensedbook);
    margin-bottom:0;
    min-height: 3.5rem;
    padding: gesso-spacing(xs);
    position: relative;
    transition: margin 300ms;
    &.open{
      margin-bottom:4rem;
      transition: margin 300ms;
    }
    @include medium{
      @include uw-contained-width;
      min-height:inherit;
      padding: gesso-spacing(sm);
    }

    .uw-site-logo {
      align-self: flex-start;
      flex: 1;
    }
    .uw-header-menu {
      align-self: flex-end;
      margin-right:2.75rem;
      @include medium {
        margin-right:1rem;
      }
    }
    .uw-header-search {
      align-self: flex-end;
    }
    .uw-header-searchbar{
      @include uw-contained-width;
      display:block;
      left:0;
      padding:0;
      position:absolute;
      top:100%;
      width:100%;
      @include medium{
        display:none;
      }
    }

  }

  .uw-header__nav{
    @include uw-full-width;
    background-color: $site-name-bg;

  }
  .uw-header__center{
    @include uw-contained-width;
    border-bottom:1px solid  gesso-grayscale(gray-3);
    @include medium{
      border-bottom:inherit;
    }
    display: grid;
    grid-template-columns:  auto 4rem;
    padding:0;
  }
  .uw-header__site-name{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
  .uw-navigation-button{
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .uw-header__navigation{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }

  .messages-list {
    background-color: $uw-white;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0 1rem;
  }
}