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

.c-site-header--section {
  @include c-site-header-placeholder-height(rem(104));
  @include c-site-header-menu-panel-offset(rem(104));

  // 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__text {
    overflow: hidden;
    display: none;
  }
  .c-site-header__text-wrapper {
    @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 {
    @include animation(reveal-header, 0.25s, linear, 0s, 1, normal, forwards, running);
  }
  &.c-site-header--section--hiding {
    @include animation(hide-header, 0.25s, linear, 0s, 1, normal, forwards, 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);
    }
  }
}
