//
// Headers
// --------------------------------------------------
// scss-lint:disable NestingDepth, SelectorDepth

// Wrapper and base class
// -----------------------------------------------------------------------------
// Provide a static header from which we expand to create full-width, fixed, and
// other header variations.

.header {
  // Colors
  @include header-variant($header-default);
  @include font-family-circular();

  font-size: $header-font-size;

  z-index: $z-index-header;


  @media (max-width: $header-breakpoint - 1) {
    font-size: $header-mobile-font-size;
  }

  @media (min-width: $header-breakpoint) {
    > .container {
      position: relative;
    }
  }

  .no-flexbox & {
    // Prevent floats from breaking the header
    @include clearfix();

    > .container > * {
      float: left;
      margin-right: $grid-gutter-width;

      &.header-group-last {
        margin-right: 0;
      }
    }
  }

  .flexbox & > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    // Override container's clearfix
    &::before,
    &::after {
      content: none;
      display: none;
    }
  }
}


// Header collapse
// -----------------------------------------------------------------------------
// Group your header content for screens smaller than the $header-breakpoint

.header-collapse {
  border-top: 1px solid transparent;
  position: relative;

  // Inset shadow should appear above any content within the collapse
  &::after {
    content: '';
    pointer-events: none; // Allow click events to pass through;

    position: absolute;
    top: 0;
    width: 100%;
    height: 5px;

    box-shadow: inset 0 3px 3px -3px rgba(0,0,0,.1);
  }

  .divider {
    height: 1px;
    margin: ($line-height-small / 2 - 1) 0;
    background-color: $dropdown-divider-bg;
  }

  .header-btn {
    margin: $padding-large-vertical 0;
  }
}


// Header Components
// -----------------------------------------------------------------------------


// Brand
// ------------------
// Shows off our snazzy logo to the left
.header-brand {
  font-size:   $header-brand-font-size;
  font-weight: $header-brand-font-weight;

  &:hover,
  &:focus {
    text-decoration: none;
  }

  .no-flexbox & {
    @include header-vertical-align(rem(35px));

    display: inline-block;
  }
}


// Header groups
// ------------------
// Groups header links/buttons into flexbox items to be evenly distributed.

.no-flexbox .header-group-last {
  // scss-lint:disable ImportantRule
  float: right !important;
}

.header-group {
  display: flex;
  align-self: stretch;
  align-items: center;
}


// Breakpoints
// ------------------
// use the following classes to indicate which elements should appear for small
// screens, and which should appear for large

.header-visible-max,
.header-hidden-min {
  @media (max-width: $header-breakpoint - 1) {
    // scss-lint:disable ImportantRule
    display: none !important;
  }
}

.header-visible-min,
.header-hidden-max {
  @media (min-width: $header-breakpoint) {
    // scss-lint:disable ImportantRule
    display: none !important;
  }
}


// Header nav links
// -----------------------------------------------------------------------------
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).

.header-links {
  // undo <ul> styles
  margin:  0;
  padding: 0;

  align-self: stretch;
  display: flex;


  > li {
    // scss-lint:disable DuplicateProperty
    display: inline-block; //fallback for non-flexbox browsers
    display: flex;
  }

  .header-link,
  > li > a,
  > li > button {
    @include header-link-padding();

    // scss-lint:disable DuplicateProperty
    display: block; //fallback for non-flexbox browsers
    display: flex;
    align-items: center;
  }

    // Align link text to the right edge of the container
  .header-group-last & {
    margin-right: -1 * floor($grid-gutter-width / 2);

    @media (min-width: $screen-md-min) {
      margin-right: -1 * map-get($header-default, padding-sm-horizontal);
    }
  }
}


// Display vertically on mobile
.header-collapse .header-links {
  flex-direction: column;

  margin-right: -1 * floor($grid-gutter-width / 2);
  margin-left:  -1 * floor($grid-gutter-width / 2);

  > li {
    display: block;

    > a {
      width: 100%;

      padding-right: floor($grid-gutter-width / 2);
      padding-left:  floor($grid-gutter-width / 2);
    }
  }
}

// Dropdown menus
// -----------------------------------------------------------------------------

.header-links > li > .dropdown-menu {
  @include border-top-radius(0);

  margin-top: -1px;
  overflow-y: auto;
}

.header-fixed-bottom .header-links > li > .dropdown-menu {
  @include border-bottom-radius(0);
}

// Notifications dropdown menu
// ---------------------------
.header-notifications-dropdown .dropdown-menu {
  max-height: 40vh;

  @media (min-width: $header-breakpoint) {
    max-height: 70vh;
  }

  .header-group & {
    max-width: $header-notifications-width;
    width: max-content;
  }

  > li {

    + li {
      @media (min-width: $header-breakpoint) {
        border-top: 1px solid ui-color(u-lighter-gray);
      }
    }

    &.dropdown-header {
      text-align: center;
    }

    > a {
      white-space: normal;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon {
        margin-left: .5em;
      }
    }

    &.dropdown-header,
    > a {
      padding-top:    $padding-large-vertical;
      padding-bottom: $padding-large-vertical;
    }
  }
}

// Dropdowns go full-width in a collapsed menu
.header-collapse {
  .open .dropdown-menu {
    position: relative; // Must be relative to preserve the dropdown's z-index
    top: 0; // Fixes positioning issue in IE and FF
    float: none;
    width: auto;
    background-color: transparent;
    border: 0;
    margin-top: 0;
    box-shadow: none;

    > li > a,
    .dropdown-header {
      padding: 5px 15px 5px 25px;
    }

    > li > a {
      line-height: $line-height-base;

      &:hover,
      &:focus {
        background-image: none;
      }
    }
  }
}


// Buttons in headers
// -----------------------------------------------------------------------------

.header-btn {
  + .header-btn {
    margin-left: 1em;
  }

  // Vertically center a button for non-flexbox browsers
  .no-flexbox & {
    @include header-vertical-align($input-height-base);

    &.btn-sm {  @include header-vertical-align($input-height-small); }
    &.btn-xs {  @include header-vertical-align(rem(26px)          ); }
  }
}

// Header toggle buttons
.header-group button[data-toggle] {
  background-color: transparent;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid transparent;

  .icon {
    font-size: $header-brand-font-size;

    @media (min-width: $header-breakpoint) {
      font-size: $font-size-base;
    }
  }
}