// ============================================================================
// :: Header
// ============================================================================
/**
 * The header of the brandplatform page placed on top and contains navigation,
 * logo and more actions to make the user navigate through the platform.
 */

// ============================================================================
// :: Settings
// ============================================================================
$logo-width: 11rem;
$logo-height: 4.5rem;
$nav-open-duration: 0.5s;
$nav-close-duration: 0.5s;

// ============================================================================
// :: Root
// ============================================================================
.bp-header {
  position: relative;
  z-index: $bp-z-index-roof;

  padding: 2rem 0;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/**
 * This container determines how the elements are shown between mobile and
 * desktop.
 */
.bp-header__content {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $bp-z-index-atmosphere;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 2rem;

  background-color: $bp-background-color-dark;

  /**
   * When a hamburger menu is shown, this element must be hidden from the viewport
   * by moving it to the left, make use of opacity to avoid seeing an animation
   * when resizing the browser. Opacity is not animated for this purpose.
  */
  transform: translateX(-100%);
  opacity: 0;

  /**
   * Animate transform property so that the menu can be animated in the viewport
   * on mobile devices
   */
  transition:
    transform $nav-close-duration ease-in-out,
    opacity 0s ease-in-out $nav-close-duration;

  @include respond-at($bp-breakpoint-mobile-base) {
    padding: 5rem;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    position: static;

    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 0 0 0 6.5rem;

    background-color: transparent;

    /**
     * Cancel out the mobile version where the navigation is hidden to the right
     * of the viewport
     */
    transform: translateX(0);

    /**
     * Cancel out any animation above desktop-breakpoint, set opacity to one to show
     * the content on desktop
     */
    transition: none;
    opacity: 1;
  }
}

.bp-header__logo {
	display: flex;
	justify-content: center;
  align-items: center;
  min-width: $logo-width;
	width: $logo-width;
  height: $logo-height;
}

.bp-header__logo-image {
  max-width: 100%;
  width: 100%;
}

.bp-header__action {
  margin-top: 3.5rem;

  @include respond-at($bp-breakpoint-desktop-base) {
    margin-top: 0;
  }
}

.bp-header__hamburger {
  position: relative;
  z-index: $bp-z-index-atmosphere + 1;

  @include respond-at($bp-breakpoint-desktop-base) {
    display: none;
  }
}

// ============================================================================
// :: States
// ============================================================================
.bp-header {

  &.has-nav-open {

    .bp-header__content {
      transform: translateX(0);
      opacity: 1;

      transition:
        transform $nav-open-duration cubic-bezier(0.645, 0.045, 0.355, 1),
        opacity 0s ease-in-out;
    }

    .bp-hamburger__line,
    .bp-hamburger__bar {
      background-color: $bp-background-color-base;
    }
  }

  &.is-resizing {

    .bp-header__content {
      transition: none;
    }
  }
}