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

@mixin c-site-header--article-animation($name, $ease) {
  // 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 0.25s ease-out 0s 1 normal forwards;
  // animation-play-state: running;
  //
  animation-name: $name;
  animation-duration: 0.25s;
  animation-timing-function: $ease;
  // animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

.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__text {
    overflow: hidden;
    flex: 1 1 auto;
    display: none;
  }
  .c-site-header__text-wrapper {
    margin: 0 0 0 rem(15);
  }
  .c-site-header__text-content {
    @include font-pratt-bold;
    color: $color-white;
    font-size: rem(16);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .c-site-header__text-link {
    @include font-gm-sans-bold;
    color: $color-white;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    text-transform: uppercase;
    text-decoration: none;
    &:hover,
    &:focus {
      text-decoration: underline;
    }
    &:active {
      color: $color-grey-300;
      text-decoration: underline;
    }
  }
  .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 {
      // 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; // Must be declared separately for IE11
      transform: translate(0, 0);
      .c-button {
        display: none;
      }
    }
    .c-site-header__button-group--secondary {
      @include c-site-header--article-animation(hide-social-buttons, ease-in);
    }
    .c-site-header__text-content--headline {
      @include c-site-header--article-animation(hide-opacity, linear);
    }
    .c-site-header__text-content--section {
      display: none;
    }
  }

  // Secondary/social buttons revealing
  &.c-site-header--article--buttons-revealing {
    .c-site-header__button-group--primary {
      @include c-site-header--article-animation(hide-user-buttons, ease-in);
    }
    .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__text-content--headline {
      display: none;
    }
    .c-site-header__text-content--section {
      @include c-site-header--article-animation(hide-opacity, linear);
    }
  }

  // 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__text-content--headline {
      display: none;
    }
    .c-site-header__text-content--section {
      @include c-site-header--article-animation(reveal-opacity, linear);
      display: block;
    }
  }

  // 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__text-content--headline {
      @include c-site-header--article-animation(reveal-opacity, linear);
      display: block;
    }
    .c-site-header__text-content--section {
      display: none;
    }
  }

  // Reveal primary/user buttons
  // sass-lint:disable brace-style
  @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); }
  }

  // Hide/reveal headline and section name
  @keyframes hide-opacity {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes reveal-opacity {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  // sass-lint:enable brace-style
}
