@import "settings.breakpoints";
@import "settings.colors";
@import "settings.vars";
@import "settings.z-index";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/base.focus";
@import "mixins/components.scroll-menu";
@import "mixins/components.header";

$logo-animation-time: 0.25s;
$default-animation-time: 0.25s;

.c-header-placeholder {
  height: $c-header-height;
}

//////////////////////////////////////////////////////
// Header Title
//////////////////////////////////////////////////////
.c-header-title {
  transform: translate3d(0, 0, 0);
  align-items: center;
  background-color: $color-grey-700;
  left: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: $z-index-header-title;
}

//////////////////////////////////////////////////////
// Header Title - section specific
//////////////////////////////////////////////////////
.c-header-title--section {
  @include c-header-title;
}

.c-header-title--section.c-header-title--scrolling-down {
  transition: transform $default-animation-time ease-out;
  transform: translate(0, rem(-60));
}

.c-header-title--section.c-header-title--scrolling-up {
  transition: transform $default-animation-time ease-out;
  transform: translate(0, 0);
}

//////////////////////////////////////////////////////
// Logos
//////////////////////////////////////////////////////
.c-header-title__logo {
  width: rem(60);
  height: rem(60);
  z-index: $z-index-tgam-logo;

  // by default the logo should be moved up when a child of the "header-nav"
  .c-header-nav & {
    display: flex;
    flex: inherit;
    transform: translate(0, rem(-60));
    transition: transform $logo-animation-time ease-out;
    width: inherit;
  }

  // when the header-nav gets appended the "c-header-nav--fixed" it should animate in
  .c-header-nav--fixed & {
    display: flex;
    flex: inherit;
    transform: translate(0, 0);
    transition: transform $logo-animation-time ease-out $logo-animation-time;
    width: rem(60);
    height: rem(60);
  }
}

.c-header-title__logo__svg {
  display: inline-block;
  width: rem(60);
  height: rem(60);
}

.c-header-title__logo__svg--large {
  display: none;
}

.c-header-title__logo__svg--small {
  display: inline-block;
}

.c-header-title__anchor {
  display: flex;
  align-self: flex-start;
  flex: inherit;

  .c-header-nav.c-header-nav--fixed & {
    width: rem(60);
    transition: width $logo-animation-time ease-out;
  }

  .c-header-nav & {
    width: 0;
    transition: width $logo-animation-time ease-out $logo-animation-time;
  }
}

.c-header-title--section__h2 {
  @include font-gm-sans-bold;
  color: $color-white;
  flex-grow: 1;
  font-size: rem(12);
  letter-spacing: rem(1);
  margin: 0;
  opacity: 0;
  padding: 0 rem(10);
  text-overflow: ellipsis;
  text-transform: uppercase;
  transition: opacity $default-animation-time ease-out;
  white-space: nowrap;

  @include mobile-only {
    left: rem(110);
    line-height: rem(46);
    opacity: 0;
    position: absolute;
    right: 0;
    vertical-align: middle;

    &.u-faded {
      opacity: 0;
    }
  }

  .c-header-title--scrolling-down &, .c-header-title--scrolling-up & {
    opacity: 1;

    &.u-faded {
      opacity: 0.2;
    }
  }
}

//////////////////////////////////////////////////////
// Header Title - article specific
//////////////////////////////////////////////////////
.c-header-title--article {
  @include c-header-title;
}

.c-header-title--article__h2 {
  @include font-pratt-bold;
  color: $color-white;
  flex-grow: 1;
  font-size: rem(16);
  margin: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 rem(10);
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: rem(115);
  right: rem(400);
  top: 0;
  bottom: 0;
  line-height: rem(50);
  transition: opacity $default-animation-time ease-out;

  .c-header-title--scrolling-down &, .c-header-title--scrolling-up & {
    opacity: 1;
    transition: opacity $default-animation-time $default-animation-time ease-out;

    @include mobile-only {
      opacity: 0;
    }

    &.u-faded {
      opacity: 0.2;
    }
  }

  @include mobile-only {
    opacity: 0;
  }
}

//////////////////////////////////////////////////////
// Header Title Container - for either subcribe, log in buttons OR social sharing buttons
//////////////////////////////////////////////////////
.c-header-title__container {
  align-items: center;
  display: flex;
  height: $c-header-height;
  margin: 0 auto;
  max-width: rem($max-width);
  min-width: rem($min-width);
  position: relative;
  transition: transform $default-animation-time ease-out;
  width: 100%;
}

//////////////////////////////////////////////////////
// Button Container - contains button on the right side of the title
//////////////////////////////////////////////////////
.c-header-title__button-containers {
  align-items: center;
  display: flex;
  flex-grow: 1;
  height: $c-header-height;
  justify-content: flex-end;
  opacity: 1;
  position: absolute;
  transition: all $default-animation-time ease-out;
  width: auto;
  right: 0;
  top: 0;
}

.c-header-title__button-containers--login {
  transform: translate(0, 0);

  .c-header-title--scrolling-down &, .c-header-title--scrolling-up & {
    transform: translate(0, rem(-60));
  }
}

.c-header-title__button-containers--social {
  transform: translate(0, rem(-60));

  .c-header-title--scrolling-down &, .c-header-title--scrolling-up & {
    transform: translate(0, 0);
  }

  .c-header-title--article.c-header-title--show & {
    @include mobile-only {
      opacity: 1;
    }
  }
}

//////////////////////////////////////////////////////
// Nav Container
//////////////////////////////////////////////////////
.c-header-nav {
  transform: translate3d(0, 0, 0);
  position: absolute;
  top: rem(104);
  left: 0;
  right: 0;
  background-color: $color-grey-700;
  height: $c-header-height;
  padding: 0;
  width: 100%;
  z-index: $z-index-header-nav;
}

.c-header-nav--fixed {
  @include c-scroll-menu-pinned;
}

.c-header-nav__container {
  display: flex;
  max-width: rem($max-width);
  min-width: rem($min-width);
  margin: 0 auto;
  height: $c-header-height;
  align-items: center;
  overflow: hidden;
}

//////////////////////////////////////////////////////
// extra stuff
//////////////////////////////////////////////////////
@include desktop-down {
  .c-header-title, .c-header-nav, .c-header-nav.c-header-nav--fixed {
    .c-header-title__button-containers--login, .c-header-title__button-containers--social, .c-header-title--article__h2, .c-header-title__anchor, .c-header-title__logo, .c-header-title--section__h2, .c-control {
      transition: none;
    }
  }
}

@include desktop-up {
  .c-header-nav {
    z-index: $z-index-header-nav;
  }
}

.c-header-title--home {
  z-index: $z-index-header-menu;
}
