Header Logo: Homepage

.site-header__logo {
  transform: none;
  transition: transform $stickyHeadingTransLength;
  vertical-align: top;
  width: auto;

  @include respond-to($grid-breakpoint-s) {
    min-width: $headerHeightNormal;

    .sticky & {
      transform: translateY($secondaryNavStickyOffset);
    }
  }
}

.site-header__logo__wellcome,
.site-header__logo__w {
  .enhanced & {
    background-color: $ncLogoGrey;
  }

  &:hover {
    background-color: $ncOrange;
  }
}

.site-header__logo__w,
.site-header__logo__w--white,
.site-header__logo__mobile,
.site-header__logo__wellcome--white {
  display: none;

  @media print {
    display: none;
  }
}

/**
 The expanded, full Wellcome logo
 */
$fullLogoStickyScale: 0.67;
.site-header__logo__wellcome {
  height: $headerHeightNormal;
  transform: scale(1) translateY(0);
  transform-origin: left top;
  transition: transform $stickyHeadingTransLength,
    background-color $hoverTransLength, opacity $stickyHeadingTransLength/2 0ms;

  .enhanced & {
    display: none;

    @include respond-to($grid-breakpoint-s) {
      display: block;
    }
  }

  .enhanced .sticky & {
    opacity: 0;
    pointer-events: none;
    transform: scale($fullLogoStickyScale) translateY(10px);
    transition: transform $stickyHeadingTransLength,
      background-color $hoverTransLength,
      opacity $stickyHeadingTransLength/2 $stickyHeadingTransLength/2;
  }

  .enhanced .no-subnav .sticky & {
    transform: scale($fullLogoStickyScale)
      translateY($secondaryNavStickyOffset / 2);
  }
}

/**
 The smaller Wellcome logo showing only the W
 */
.site-header__logo__w {
  height: $headerHeightSticky;
  pointer-events: none;
  transition: background-color $hoverTransLength,
    transform $stickyHeadingTransLength,
    opacity $stickyHeadingTransLength/2 $stickyHeadingTransLength/2;

  .enhanced & {
    display: block;

    @include respond-to($grid-breakpoint-s) {
      height: $headerHeightSticky + $headerLogoOffset;
      left: 0;
      opacity: 0;
      position: absolute;
      top: 0;
      transform: scale(1.5) translateY(-6.6px);
      transform-origin: top left;
    }

    @media print {
      display: none;
    }
  }

  .enhanced .sticky & {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    transition: background-color $hoverTransLength,
      opacity $stickyHeadingTransLength/2 0ms,
      transform $stickyHeadingTransLength;
  }

  .enhanced .no-subnav .sticky & {
    @include respond-to($grid-breakpoint-s) {
      transform: translateY($secondaryNavStickyOffset / 2);
    }
  }
}

.site-header__logo__w--white {
  display: block;
  opacity: 0;
  width: $headerHeightSticky;

  .is-ie & {
    max-height: $headerHeightSticky;
    width: auto; // IE randomness
  }

  .js-search-expanded & {
    opacity: 1;
    transition: opacity 0.5s 0.3s;
  }

  @include respond-to($grid-breakpoint-s) {
    display: none;
  }
}

.site-header__logo__wellcome--white {
  @include respond-to($grid-breakpoint-s) {
    display: block;
    height: $headerHeightNormal;
  }

  @include respond-to($grid-breakpoint-l) {
    height: $grid-typo-spacing-xxl;
  }
}

.site-header__logo__mobile,
.site-header__logo__mobile--white {
  display: block;
  height: $headerHeightSticky;
  left: 0;
  position: absolute;
  top: 0;
  transition: transform 0.5s;
  z-index: 3;

  .js-search-expanded & {
    transform: translateX(-100%);
  }

  @include respond-to($grid-breakpoint-s) {
    display: none;
  }

  @media print {
    display: block;
    position: static;
  }
}