@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));

  --scale-factor: 1;// Ensure that header items don't get resized via the text-resizer as there may be elements that appear both in the article's main content area and header.

  .c-site-header__logo {
    z-index: 1; // overlap onto member benefits menu
  }
  // 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;
  }
  .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--article--revealing {
    @include animation(reveal-header, 0.25s, linear, 0s, 1, normal, forwards, running);
  }
  &.c-site-header--article--hiding {
    @include animation(hide-header, 0.25s, linear, 0s, 1, normal, forwards, running);
  }
  &.c-site-header--article--revealed { // Default state
    transform: translate(0, 0);
  }
  &.c-site-header--article--hidden {
    transform: translate(0, -120%); // extra 20% for red TGAM logo overlap of 10px
  }
  // Keyframes
  @keyframes hide-header {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, -120%);
    }
  }
  @keyframes reveal-header {
    from {
      transform: translate(0, -120%);
    }
    to {
      transform: translate(0, 0);
    }
  }
}
