// ============================================================================
// :: Hamburger
// ============================================================================
/**
 * Item used to display on handheld devices when the navigation is too long.
 * Once this is tapped or clicked it opens up the main navigation.
 */

// ============================================================================
// :: Settings
// ============================================================================
$bar-height: 0.3rem;
$delay: 0.2s;
$text-delay: $delay + 0.18s;
$middle: 1.1rem;
$hover-distance: 0.25rem;
$nav-toggle-close-duration: 0.5s;

// ============================================================================
// :: Root
// ============================================================================
.bp-hamburger {
  position: relative;

  width: 3rem;
  height: 2.1rem;

  border: none;
  background-color: transparent;

  cursor: pointer;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-hamburger__close,
.bp-hamburger__menu {
  display: block;
  width: 100%;
  height: 100%;
}

.bp-hamburger__menu {
  position: relative;

  transition: opacity 0s $delay;
}

.bp-hamburger__close {
  position: absolute;
  top: 0;
  left: 0;

  opacity: 0;

  transition: opacity 0s $delay;
}

.bp-hamburger__bar,
.bp-hamburger__line {
  display: block;

  position: absolute;

  height: $bar-height;

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

.bp-hamburger__bar {
  left: 0;

  width: 100%;

  transition:
    transform 0.3s cubic-bezier(0.17, 1.19, 0.22, 1.32) $delay,
    background-color $nav-toggle-close-duration ease-in-out;
}

.bp-hamburger__line {
  top: calc(50% - (#{$bar-height} * 0.5));
  width: 50%;

  transition:
    transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
    background-color $nav-toggle-close-duration ease-in-out;
}

.bp-hamburger__text {
  /**
   * These values are fixed and based on the MENU text within the hamburger menu
   * because if positioning this in the center will make the text blurry on certain
   * browsers.
   */
  position: absolute;
  top: 0.5rem;
  left: -0.4rem;

  font-size: $bp-font-size-3x-small;
  font-weight: $bp-font-weight-bold;
  text-transform: uppercase;
  letter-spacing: 0.05rem;

  opacity: 0;

  transition: opacity 0.3s ease-in-out;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.bp-hamburger__bar--top {
  top: 0;
}

.bp-hamburger__bar--middle {
  top: calc(50% - (#{$bar-height} * 0.5));
}

.bp-hamburger__bar--bottom {
  bottom: 0;
}

.bp-hamburger__line--top-left,
.bp-hamburger__line--bottom-left {
  left: 0;

  transform-origin: right center;
}

.bp-hamburger__line--top-right,
.bp-hamburger__line--bottom-right {
  right: 0;

  transform-origin: left center;
}

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

  &:hover {

    .bp-hamburger__bar {
      transition:
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) $delay,
        background-color $nav-toggle-close-duration ease-in-out;
    }

    .bp-hamburger__bar--top {
      transform: translateY(-#{$hover-distance});
    }

    .bp-hamburger__bar--bottom {
      transform: translateY(#{$hover-distance});
    }

    .bp-hamburger__bar--middle {
      transform: scaleX(0);

      transition:
        transform 0.3s ease-in-out $delay,
        background-color $nav-toggle-close-duration ease-in-out;
    }

    .bp-hamburger__text {
      opacity: 1;

      transition: opacity 0.5s ease-in-out $text-delay;
    }
  }

  &.is-closed {

    .bp-hamburger__menu {
      opacity: 0;

      transition: opacity 0s $delay;
    }

    .bp-hamburger__text {
      opacity: 0;

      transition: opacity 0.2s ease-in-out;
    }

    .bp-hamburger__bar {
      transition:
        transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
        background-color $nav-toggle-close-duration ease-in-out;
    }

    .bp-hamburger__bar--top {
      transform: translateY(#{$middle});
    }

    .bp-hamburger__bar--bottom {
      transform: translateY(-#{$middle});
    }

    .bp-hamburger__bar--middle {
      transform: scaleX(1);
    }

    .bp-hamburger__close {
      transition: opacity 0s $delay;

      opacity: 1;
    }

    .bp-hamburger__line {
      transition:
        transform 0.4s cubic-bezier(0.17, 1.19, 0.22, 1.32) $delay,
        background-color $nav-toggle-close-duration ease-in-out;
    }

    .bp-hamburger__line--top-left,
    .bp-hamburger__line--bottom-right {
      transform: rotate(45deg);
    }

    .bp-hamburger__line--top-right,
    .bp-hamburger__line--bottom-left {
      transform: rotate(-45deg);
    }
  }
}