@import "mixins/components.site-header";

.c-site-header--section {
  @include c-site-header-placeholder-height(rem(110));
  @include c-site-header-menu-panel-offset(rem(60));
  @include c-site-header-menu-panel-overlaps-scroll-menu(true);
  // Maintain the height of this element when the scroll menu is hidden
  .c-site-header__bottom-content {
    min-height: rem(44); // Scroll menu height
  }
  .c-site-header__button-group {
    height: rem(60);
  }
  .c-site-header__headline {
    overflow: hidden;
    display: none;
  }
  .c-site-header__headline-text {
    @include font-gm-sans-bold;
    margin: 0 0 0 rem(15);
    color: $color-white;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .c-site-header__logo,
  .c-site-header__buttons {
    align-self: flex-start;
  }
  &.c-site-header--section--revealing {
    // animation-play-state must be declared separately for IE11
    // animation: reveal-header 0.25s linear 0s 1 normal forwards;
    // animation-play-state: running;
    //
    // NOTE: Until WaPo fixes an issue with PageBuilder's uglifier where
    // it strips the "s" from "0s", we have to write out the individual,
    // long-hand animation properties and omit "animation-delay". This
    // only works because the default value for "animation-delay" is "0s".
    animation-name: reveal-header;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    // animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
  }
  &.c-site-header--section--hiding {
    // animation: hide-header 0.25s linear 0s 1 normal forwards;
    // animation-play-state: running;
    animation-name: hide-header;
    animation-duration: 0.25s;
    animation-timing-function: linear;
    // animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
  }
  &.c-site-header--section--revealed { // Default state
    transform: translate(0, 0);
  }
  &.c-site-header--section--hidden {
    transform: translate(0, -100%);
  }
  // Keyframes
  @keyframes hide-header {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, -100%);
    }
  }
  @keyframes reveal-header {
    from {
      transform: translate(0, -100%);
    }
    to {
      transform: translate(0, 0);
    }
  }
}
