/* Burger Menu Styles */

.burger-menu__trigger {
  display: none;

  /*
  If the component is disabled—which is our default state—we don’t want to present a trigger. Hiding it with display: none will hide it from screen readers, too.
  */
}

.burger-menu__bar,
.burger-menu__bar::before,
.burger-menu__bar::after {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--color-dark);
  position: absolute;
  left: 50%;
  margin-left: -12px;

  /*
  Style the innerHTML bars.
  */
}

.burger-menu__bar {
  top: 50%;
  transition: background 10ms 300ms ease;
  transform: translateY(-50%);
  /*
  Position the .burger-menu__bar dead-center with absolute positioning, which allows us to comfortably animate it, knowing it won’t affect layout.
  */
}

/* Render the pseudo-elements and push one up and one down. */

.burger-menu__bar::before,
.burger-menu__bar::after {
  content: "";
}

.burger-menu__bar::before {
  transition: top 300ms 350ms ease, transform 300ms 50ms ease;
  top: -8px;
}

.burger-menu__bar::after {
  transition: bottom 300ms 350ms ease, transform 300ms 50ms ease;
  bottom: -8px;
}

/* ~~~ CSS Exceptions ~~~ */

/* Handle styling of the menu when it is enabled */

.burger-menu[enabled='true'] .burger-menu__trigger {
  display: block;
  width: 2rem;
  height: 2rem; /* Nice big tap target */
  position: relative;
  z-index: 99;
  background: transparent;
  border: none;
  cursor: pointer;
}

.burger-menu[enabled='true'] .burger-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5rem 1.5rem 2rem 1.5rem;

  /* Make panel fill the screen. */
  width: 100%; 
  height: 100%;
  
  visibility: hidden; /* Hide panel visibility when menu is closed to allow user interaction with other page elements "below" the panel. */
  opacity: 0;
  background: var(--color-light-shade);
  overflow-y: auto; /* Set the vertical overflow to auto so long menus can be scrolled. */
  -webkit-overflow-scrolling: touch;

  z-index: 1; /* We increase the z-index to ensure the modal menu covers all other content. */
}

/* Convert the navigation into a stacked menu when the burger menu is enabled. */

.burger-menu[enabled='true'] .navigation ul {
  display: block;
}

.burger-menu[enabled='true'] .navigation ul > * + * {
  margin-top: 2rem;
}

.burger-menu[enabled='true'] .navigation li {
  font-size: 1.5rem;
}

/* Hide the navigation list items until the burger menu is open. */

.burger-menu[enabled='true'][status='closed'] .navigation li {
  opacity: 0;
}

.burger-menu[enabled='true'][status='open'] .navigation li {
  opacity: 1;
}

/* Interactive States */
/* The panel’s visibility can only be changed if the burger menu is enabled and the status is open. */

.burger-menu[enabled='true'][status='open'] .burger-menu__panel {
  visibility: visible;
  transition: opacity 400ms ease;
  opacity: 1;

  /*
  When the panel is “open”, we transition the opacity to 1 and set visibility to visible to show it.
  */
}

.burger-menu[enabled='true'][status='closed'] .burger-menu__panel {
  transition: opacity 400ms ease;

  /*
  In the “closed” state, we transition the navigation panel to its default opacity (i.e. 0).
  */
}

.burger-menu[enabled='true'][status='closed'] .burger-menu__panel > * {
  transition: opacity 400ms ease;
  opacity: 0;

  /*
  In the “closed” state, we visually hide the navigation items with opacity.
  */
}

.burger-menu[enabled='true'][status='open'] .burger-menu__panel > * {
  transition: transform 500ms cubic-bezier(0.17, 0.67, 0, 0.87) 400ms, opacity 500ms ease 400ms;
  transform: translateY(0);
  opacity: 1;

  /*
  When the panel is in the “open” state, we transition them back to being visible with full opacity.
  */
}

/* 
BURGER MENU BAR ANIMATION

Convert burger bars into a 'close' icon when the menu is open. 

Sets the background and border of the main (central) bar to be transparent, and rotates the pseudo-elements in opposite directions to create a cross.
*/

.burger-menu[enabled='true'][status='open'] .burger-menu__bar::before {
  transition: top 300ms 50ms ease, transform 300ms 350ms ease;
  top: 0;
  transform: rotate(45deg);
}

.burger-menu[enabled='true'][status='open'] .burger-menu__bar::after {
  transition: bottom 300ms 50ms ease, transform 300ms 350ms ease;
  bottom: 0;
  transform: rotate(-45deg);
}

.burger-menu[enabled='true'][status='open'] .burger-menu__bar {
  background: transparent;
}