// 1. UnboundEd logo background: I picked a solid color for ELA (#9B310E) and Math (#005049). Let's keep these fixed, regardless of the subject/grade color code, and see if that works.
// 2. The UnboundEd logo is actually meant to be white at 100% opacity (Unbound) and white at 66% opacity (Ed), or #FFFFFF and #FFFFFFA6.
// 3) The background area behind the Lesson Info should be the subject/grade hex code—there are 14 each for ELA & Math (PK-12).
// 4) The side blocks should be the same colors as in 3), but at 80% opacity.

$ub-sticky-logo-width: 260px;

.c-sticky-header {
  // override some default foundation sticky values to meet design specs
  height: auto !important;
  .sticky {
    width: 100%;
    z-index: $reveal-zindex;
  }
  @include breakpoint(large) {
    .sticky.is-anchored {
      max-height: 1px;
      visibility: hidden;

      .c-sticky-header-dropdown, .c-sticky-header-sitemenu {
        display: none;
      }
    }
  }

  @include e(item) {
    @include flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: $ub-nav-height;
    position: relative;
  }

  @include e(link) {
    @include add-column-padding;
    &, a { color: $ub-nav-link; }
    &:hover, &:focus, a:hover, a:focus, &.active a { color: $ub-white; text-decoration: none; }
    > a {
      @include txt-element(nav-span);
      font-size: 20px;
      span:last-child:before { content: '\00a0'; }
    }
  }

  @include e(menu) {
    @include menu-direction(vertical);
    > li > a { @include add-column-padding(0); }
  }

  @include e(submenu) {
    @include menu-direction(horizontal);
    @include add-column-padding;
    background-color: rgba($ub-primary, .8);
  }

  @include e(submenu-link) {
    a i { margin-right: 0 !important; }
    a, &.active a, a:hover, a:focus {
      color: darken($ub-nav-bg, 5%) !important;
    }

    a { padding: 0.7rem 1rem .7rem 0 !important; }

    .fa-header-bg { color: $ub-white; }
  }

  @include e(summary) {
    @include add-column-padding;
    @include breakpoint-style-from-map($ld-sticky-header-height, height);
    @include breakpoint-style-from-map($ld-sticky-header-padding, padding-top);
    flex: 1 1 auto;
  }

  @include e(wrap) {
    flex-wrap: nowrap !important;
    position: relative;

    @include breakpoint(medium down) {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

.c-sticky-header-dropdown {
  @include add-top-bottom-padding(1);
  @include add-column-padding;
  @include ld-content-dropdown;
  background-color: $ub-white;
  display: none;

  @include breakpoint(large) {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15);
    flex: 1 1 auto;
    margin-left: $ub-sticky-logo-width;
    margin-right: $ub-nav-height;
  }

  @include e(wrap) {
    position: fixed;
    width: 100%;
  }
}

.c-sticky-header-sitemenu {
  background-color: $ub-nav-bg;
  display: none;
  margin-left: $ub-sticky-logo-width;

  @include e(wrap) {
    position: fixed;
    width: 100%;
  }
}

.c-sticky-header-title {
  @include flex;

  @include e(header) {
    @include clamp(1, ld-sticky-title);
    flex: 0 1 auto;
  }

  @include e(icon) {
    flex: 0 0 auto;
    margin-left: .5rem;
  }
}

.c-sticky-header-toggle {
  color: $ub-white;
  cursor: pointer;
  width: $ub-nav-height;

  @include e(overlay) {
    background-color: $ub-nav-bg;
    height: 100%;
    opacity: .1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;

    @include m(active) {
      background-color: darken($ub-nav-bg, 5%);
      opacity: 1;
    }
  }

  @include e(toggle) {
    @include add-column-padding;
    z-index: $reveal-zindex;
  }

  &:hover {
    .c-sticky-header-toggle__overlay {
      opacity: 1;
    }
  }
}

.c-sticky-header-summary {
  @include e(map) {
    flex: 0 0 auto;
    margin-right: 1rem;
  }

  @include e(content) {
    flex: 1 1 auto;
    a, a:hover, a:focus { color: $ub-white; }

    i { @include txt-element(ld-sticky-icon); }
  }

  @include e(menu) {
    display: none;
    flex: 0 0 100%;
  }
}