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

.c-site-header--article {
  @include c-site-header-placeholder-height(rem(50));
  @include c-site-header-menu-panel-offset(rem(50));
  @include c-site-header-menu-panel-overlaps-scroll-menu(false);

  // A mask to cover the buttons so that you won't be able to see them
  // when they animate past the top boundary of the viewport and you're
  // using an iOS device with bouncy, "elastic" scrolling
  &::before {
    content: "";
    width: 100%;
    height: rem(200);
    background-color: $color-white;
    position: absolute;
    top: rem(-200);
    left: 0;
    z-index: 9999;
  }
  // Fixed height so that logo overlaps
  .c-site-header__top-content,
  .c-site-header__button-group {
    height: rem(50);
  }
  .c-site-header__headline {
    overflow: hidden;
    flex: 1 1 auto;
    display: none;
  }
  .c-site-header__headline-text {
    @include font-pratt-bold;
    margin: 0 0 0 rem(15);
    color: $color-white;
    font-size: rem(16);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // 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 transition properties and omit "transition-delay". This
    // only works because the default value for "transition-delay" is "0s".
    //
    // transition: opacity 0.25s ease-out 0s;
    //
    transition-property: opacity;
    transition-duration: 0.25s;
    transition-timing-function: ease-out;
    // transition-delay: 0s;
  }
  .c-site-header__logo,
  .c-site-header__buttons {
    align-self: flex-start;
  }
  .c-site-header__buttons {
    transform: translateY(-50%);
  }
  .c-site-header__button-group--primary {
    transform: translate(0, 100%);
  }
  .c-site-header__button-group--secondary {
    transform: translate(0, -100%);
    .c-button {
      margin-left: 0;
      margin-right: 0;
    }
  }

  // Secondary/social buttons hiding
  &.c-site-header--article--buttons-hiding {
    .c-site-header__button-group--primary {
      // animation-play-state must be declared separately for IE11
      //
      // Keep the primary/user buttons hidden and delay their animation until
      // the secondary/social buttons have finished animating (0.25s)
      // (see the "--buttons-hidden" state below)
      animation: reveal-user-buttons 0.25s ease-out 0.25s 1 normal forwards;
      animation-play-state: running;
      transform: translate(0, 0);
      .c-button {
        display: none;
      }
    }
    .c-site-header__button-group--secondary {
      // 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: hide-social-buttons 0.25s ease-out 0s 1 normal forwards;
      // animation-play-state: running;
      //
      animation-name: hide-social-buttons;
      animation-duration: 0.25s;
      animation-timing-function: ease-out;
      // animation-delay: 0s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: forwards;
      animation-play-state: running;
    }
    .c-site-header__headline-text {
      opacity: 0;
    }
  }

  // Secondary/social buttons revealing
  &.c-site-header--article--buttons-revealing {
    .c-site-header__button-group--primary {
      // animation: hide-user-buttons 0.25s ease-out 0s 1 normal forwards;
      // animation-play-state: running;
      //
      animation-name: hide-user-buttons;
      animation-duration: 0.25s;
      animation-timing-function: ease-out;
      // animation-delay: 0s;
      animation-iteration-count: 1;
      animation-direction: normal;
      animation-fill-mode: forwards;
      animation-play-state: running;
    }
    .c-site-header__button-group--secondary {
      // Keep the secondary/social buttons hidden and delay their animation until
      // the primary/user buttons have finished animating (0.25s)
      // (see the "--buttons-revealed" state below)
      animation: reveal-social-buttons 0.25s ease-out 0.25s 1 normal forwards;
      animation-play-state: running;
      .c-button {
        display: none;
      }
    }
    .c-site-header__headline-text {
      opacity: 0;
    }
  }

  // Secondary/social buttons hidden (default state)
  &.c-site-header--article--buttons-hidden {
    .c-site-header__button-group--primary {
      // Reveal the primary/user buttons again. The animation that was
      // defined in the "--buttons-hiding" state (see above) should play
      // at this point, because it was given a 0.25s delay.
      .c-button {
        display: flex;
      }
    }
    .c-site-header__button-group--secondary {
      // Hide the secondary/social buttons for accessibility reasons
      .c-button {
        display: none;
      }
    }
    .c-site-header__headline-text {
      opacity: 0;
    }
  }

  // Secondary/social buttons revealed
  &.c-site-header--article--buttons-revealed {
    .c-site-header__button-group--primary {
      // Hide the primary/user buttons for accessibility reasons
      .c-button {
        display: none;
      }
    }
    .c-site-header__button-group--secondary {
      // Reveal the secondary/social buttons again. The animation that was
      // defined in in the "--buttons-revealing" state (see above) should play
      // at this point, because it was given a 0.25s delay.
      .c-button {
        display: flex;
      }
    }
    .c-site-header__headline-text {
      opacity: 1;
    }
  }

  // Reveal primary/user buttons
  @keyframes reveal-user-buttons {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, 100%);
    }
  }
  @keyframes hide-social-buttons {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, -100%);
    }
  }

  // Reveal secondary/social buttons
  @keyframes hide-user-buttons {
    from {
      transform: translate(0, 100%);
    }
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes reveal-social-buttons {
    from {
      transform: translate(0, -100%);
    }
    to {
      transform: translate(0, 0);
    }
  }
}
