@import "mixins/tools.functions";
@import "mixins/components.button";
@import "mixins/components.site-header";

.c-site-header--home {
  @include c-site-header-placeholder-height(rem(104));
  &:not(.c-site-header--sticky) {
    @include c-site-header-menu-panel-offset(rem(104));
  }
  &.c-site-header--sticky {
    @include c-site-header-menu-panel-offset(rem(44)); // Scroll menu height
  }
  // Hide one of the duplicate logos/buttons
  .c-site-header__logo--wide,
  .c-site-header__hamburger--bottom,
  .c-button--search-bottom {
    display: none;
  }
  .c-site-header__bottom-content {
    // Maintain the height of this element when the scroll menu is hidden
    min-height: rem(44); // Scroll menu height
    display: flex;
    align-items: center;
  }
  .c-scroll-menu {
    flex: 1;
  }
  // Animation
  &.c-site-header--home--collapsing,
  &.c-site-header--home--collapsed {
    transform: translate(0, rem(-60));
  }
  &.c-site-header--home--collapsing,
  &.c-site-header--home--expanding {
    .c-site-header__hamburger--top {
      .c-button {
        background-color: transparent;
        transition: none;
      }
    }
  }
  // Collapsing
  &.c-site-header--home--collapsing {
    .c-site-header__hamburger--top {
      @include animation(slide-burger-down, 0.25s, linear, 0.15s, 1, normal, forwards, running);
    }
    .c-site-header__logo--square {
      @include animation(slide-logo-down, 0.25s, linear, 0.15s, 1, normal, forwards, running);
    }
    .c-scroll-menu {
      @include animation(slide-menu-right, 0.25s, linear, 0s, 1, normal, forwards, running);
    }
  }
  // Expanding
  &.c-site-header--home--expanding {
    .c-site-header__hamburger--top {
      @include animation(slide-burger-up, 0.25s, linear, 0s, 1, normal, forwards, running);
    }
    .c-site-header__logo--square {
      @include animation(slide-logo-up, 0.25s, linear, 0s, 1, normal, forwards, running);
    }
    .c-scroll-menu {
      margin-left: rem(108);
    }
  }
  // Collapsed
  &.c-site-header--home--collapsed {
    .c-site-header__hamburger--top {
      transform: translate(0, rem(52));
      .c-button {
        @include c-button-theme--transparent-lighten;
        @include c-button--no-border-radius;
      }
    }
    .c-site-header__logo--square {
      transform: translate(0, rem(60));
    }
    .c-site-header__buttons {
      display: none;
    }
    .c-scroll-menu {
      margin-left: rem(108);
    }
  }
  // Expanded (default state)
  &.c-site-header--home--expanded {
    .c-site-header__hamburger--top {
      transform: translate(0, 0);
    }
    .c-site-header__logo--square {
      transform: translate(0, 0);
    }
    .c-scroll-menu {
      @include animation(slide-menu-left, 0.25s, linear, 0s, 1, normal, forwards, running);
    }
  }
  // Keyframes
  @keyframes slide-logo-up {
    from {
      transform: translate(0, rem(60));
    }
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes slide-logo-down {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, rem(60));
    }
  }
  @keyframes slide-burger-up {
    from {
      transform: translate(0, rem(52));
    }
    to {
      transform: translate(0, 0);
    }
  }
  @keyframes slide-burger-down {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, rem(52));
    }
  }
  @keyframes slide-menu-right {
    from {
      margin-left: 0;
    }
    to {
      margin-left: rem(108);
    }
  }
  @keyframes slide-menu-left {
    from {
      margin-left: rem(108);
    }
    to {
      margin-left: 0;
    }
  }
  // For some reason, for IE11, these keyframes have to be defined in this
  // file instead of in "mixins/_components.site-header--home.scss", even
  // though they're only used in that file (in a media query mixin) ¯\_(ツ)_/¯
  @keyframes slide-menu-right-2 {
    from {
      margin-left: 0;
    }
    to {
      margin-left: rem(60);
    }
  }
  @keyframes slide-menu-left-2 {
    from {
      margin-left: rem(60);
    }
    to {
      margin-left: 0;
    }
  }
}
