/*** MU-BUTTON--HAMBURGER.CSS v1.1
- This is a Utility Module (MU); a button in the form of a hamburger.
- An active template is available within Header.html.
- The `.mu-button--hamburger` class itself is a SEMANTIC HOOK (no rule here);
  all visual rules target its inner parts (`.mu-button--hamburger-main`,
  `.mu-button--hamburger-main-bar`, etc.) so the parent class can stay
  declarative without competing with the inner box model. Add a rule here only
  if the button as a whole needs styling that can't live on its inner main.
##########################
***/

/* #region # MAIN */
/* ########################## */

/* # MAIN */

.mu-button--hamburger-main {
  /* Disposition */
  position: relative;
  /* Box Model */
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  /* Other */
  cursor: pointer;
}

/* ## INDIVIDUAL BARS */

.mu-button--hamburger-main-bar {
  /* Disposition */
  display: block;
  position: relative;
  /* Box Model */
  width: 1.5rem;
  height: 3px;
  margin-bottom: 4px;
  /* Color & Background */
  color: var(--color-white);
  background-color: var(--color-white);
  /* Transition & Animation */
  transition: opacity 0.5s ease-out 0.1s, transform 0.25s ease-out 0.1s;
}

.mu-button--hamburger-main-bar:last-child {
  /* Disposition */
  position: relative;
  /* Box Model */
  margin-bottom: 0px;
}

.mu-button--hamburger-main.expanded .mu-button--hamburger-main-bar-1 {
  /* Disposition */
  position: relative;
  /* Transition & Animation */
  transform: translate(0px, 7px) rotate(-45deg);
}

.mu-button--hamburger-main.expanded .mu-button--hamburger-main-bar-2 {
  /* Disposition */
  position: relative;
  opacity: 0;
  /* Transition & Animation */
  transform: translate(0px, 16px);
}

.mu-button--hamburger-main.expanded .mu-button--hamburger-main-bar-3 {
  /* Disposition */
  position: relative;
  /* Transition & Animation */
  transform: translate(0px, -7px) rotate(45deg);
}

/* #endregion */