@import "../settings.colors";

@import "tools.functions";
@import "base.focus";
@import "components.button";
@import "components.menu-panel";
@import "components.scroll-menu";
@import "components.site-header";

@mixin c-site-header--home--sm {
  @include c-site-header--benefits--sm;
  @include c-menu-panel--sm;
  .c-site-header--home {
    @include c-site-header-placeholder-height(rem(148));
    &:not(.c-site-header--sticky) {
      @include c-site-header-menu-panel-offset(rem(148));
    }
    &.c-site-header--sticky {
      @include c-site-header-menu-panel-offset(rem(44)); // Scroll menu height
    }
    // Header becomes taller and the background colour changes
    .c-site-header__top,
    .c-site-header__logo--wide {
      background-color: $color-red-500;
    }
    // Change button colours to account for new header colour
    .c-site-header__hamburger--top {
      .c-button {
        @include c-button-theme--transparent-darken;
      }
    }
    .c-site-header__button {
      > .c-button {
        @include c-button-theme--white-primary-red-text;
      }
      > .c-button--transparent-lighten {
        @include c-button-theme--transparent-darken;
      }
      > .c-button--grey-secondary {
        @include c-button-theme--semi-transparent-darken;
      }
    }
    // Inverted focus outline for buttons
    .c-site-header__button > .c-button {
      &:focus,
      &:hover:focus {
        @include focus-outline-inverted;
      }
    }

    // Unread stories indicator.
    .c-button--unread {
      &:not(.c-button--transparent-lighten) {
        @include c-button-theme($color-grey-700);
      }

      &:hover, &:focus {
        .c-button__unread-indicator {
          border: 1px solid $color-stone-100;
          background-color: $color-stone-100;
          color: $color-grey-900;
        }
      }
      &:active {
        .c-button__unread-indicator {
          border: 1px solid $color-stone-100;
          background-color: $color-stone-100;
          color: $color-grey-900;
        }
      }
    }

    .c-button__unread-indicator {
      border: 1px solid $color-stone-100;
      background-color: $color-stone-100;
    }

    // Change scroll menu background colour
    .c-site-header__bottom {
      background-color: $color-grey-700;
    }
    .c-scroll-menu {
      @include c-scroll-menu-show-arrows;
      @include c-scroll-menu-color($color-grey-700);
    }
    .c-site-header__top-content,
    .c-site-header__logo--wide {
      height: rem(104);
    }
    .c-site-header__top-content {
      padding-left: 0;
      padding-right: 0;
      position: relative;
      background-color: transparent;
    }
    // Wide-format logo
    .c-site-header__logo--wide {
      align-self: auto;
      display: flex;
      align-items: center;
      position: absolute;
      z-index: 1;
      top: 0;
      left: rem(13);
      .c-site-header__logo-link {
        min-width: rem(420);
        width: rem(420);
        height: rem(35);
      }
    }
    // Toggle visibility of the duplicate logos and buttons
    .c-site-header__logo--square,
    .c-site-header__hamburger--top,
    .c-site-header__button--search-top {
      display: none;
    }
    .c-site-header__logo--wide {
      display: flex;
    }
    .c-site-header__hamburger--bottom,
    .c-button--search-bottom {
      display: block;
    }
    .c-site-header__hamburger--bottom {
      // This container is the same width as its child button, to
      // create an empty placeholder space when we hide the button
      width: rem(44);
    }
    // Animation
    &.c-site-header--home--collapsing,
    &.c-site-header--home--collapsed {
      transform: translate(0, rem(-104));
    }
    &.c-site-header--home--collapsing,
    &.c-site-header--home--expanding,
    &.c-site-header--home--collapsed {
      .c-site-header__logo--square,
      .c-site-header__hamburger--top {
        display: block;
      }
      .c-site-header__hamburger--top {
        visibility: hidden;
      }
    }
    &.c-site-header--home--collapsing,
    &.c-site-header--home--expanding {
      .c-site-header__hamburger--top {
        animation: none;
      }
    }
    // Collapsing
    &.c-site-header--home--collapsing {
      .c-scroll-menu {
        @include animation(slide-menu-right-2, 0.25s, linear, 0s, 1, normal, forwards, running);
      }
    }
    // Expanding
    &.c-site-header--home--expanding {
      .c-scroll-menu {
        margin-left: rem(60);
      }
    }
    // Collapsing
    &.c-site-header--home--collapsed {
      .c-site-header__logo--square {
        transform: translate(0, rem(82));
      }
      .c-site-header__logo--wide {
        display: none;
      }
      .c-site-header__hamburger--top {
        transform: translate(0, rem(74));
        .c-button {
          @include c-button-theme--transparent-lighten;
        }
      }
      .c-site-header__hamburger--top {
        visibility: visible;
      }
      .c-site-header__hamburger--bottom {
        .c-button {
          display: none;
        }
      }
      .c-scroll-menu {
        margin-left: rem(60);
      }
    }
    // Expanded
    &.c-site-header--home--expanded {
      // Inverted focus outline for logo and hamburger
      .c-site-header__hamburger--top .c-button,
      .c-site-header__logo-link {
        &:focus,
        &:hover:focus {
          @include focus-outline-inverted;
        }
      }
      .c-scroll-menu {
        @include animation(slide-menu-left-2, 0.25s, linear, 0s, 1, normal, forwards, running);
      }
    }
    // Keyframes
    @keyframes slide-logo-up {
      from {
        transform: translate(0, rem(82));
      }
      to {
        transform: translate(0, 0);
      }
    }
    @keyframes slide-logo-down {
      from {
        transform: translate(0, 0);
      }
      to {
        transform: translate(0, rem(82));
      }
    }
    @keyframes slide-burger-up {
      from {
        transform: translate(0, rem(74));
      }
      to {
        transform: translate(0, 0);
      }
    }
    @keyframes slide-burger-down {
      from {
        transform: translate(0, 0);
      }
      to {
        transform: translate(0, rem(74));
      }
    }
  }
}

@mixin c-site-header--home--md {
  @include c-menu-panel--md;
}

@mixin c-site-header--home--lg {
  // Make logo bigger
  .c-site-header--home {
    .c-site-header__logo--wide {
      .c-site-header__logo-link {
        min-width: rem(460);
        width: rem(460);
        height: rem(38);
      }
    }
  }
}

