/*
 * Hamburger menu toggle
 * NB NB NB!!! Must have template form-element--clean.html.twig in theme to work!
 * */

:root {
  --menu-width: 80px;
  --a-bit : 10px
}

#ssmm-wrapper {
  position: absolute;
  right: calc(2 * var(--a-bit));
  top: var(--a-bit);
  margin: var(--a-bit) 0 0 var(--a-bit);
}

/* 
 * The input placeholder 
 * Put it on top of the burger and hide it
*/
#ssmm-wrapper #ssmm_trigger input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/* Make the burger spans */
#ssmm-wrapper #ssmm_trigger span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #000;
  border-radius: 3px;
  z-index: 1;
  transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.25s ease;
}


/* Transform all the slices of hamburger into a cross */
#ssmm-wrapper #ssmm_trigger input:checked ~ span.burger {
  opacity: 1;
  transform: translate(0px, -13px) rotate(45deg);
  transform-origin: 50% 50%;
}
/* The last goes in the other direction */
#ssmm-wrapper #ssmm_trigger input:checked ~ span.burger:nth-child(3) {
  transform: translate(0px, -4px) rotate(-45deg);
}
/* Hide the middle one */
#ssmm-wrapper #ssmm_trigger input:checked ~ span.burger:nth-child(2) {
  opacity: 0;
}

/* Make the menu absolute positioned */
#ssmm-wrapper #ssmm_trigger > ul {
  position: absolute;
  text-align: right;
  right: calc(-1 * var(--a-bit) - 2px);
  width: var(--menu-width);
  border-radius: 5px;
  padding: 0 var(--a-bit);
  background-color: lightskyblue; 
  list-style-type: none;
  -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */
  z-index: -10;
  opacity: 0;
}

#ssmm-wrapper #ssmm_trigger ul ul {
  margin-left: 1rem;
}

#ssmm-wrapper #ssmm_trigger ul li  {
  list-style: none;
  display: block;
  padding: 0 0 calc(2 * var(--a-bit)) 0;
  /* margin-right: calc(2 * var(--a-bit)); */
}

/* Show menu */
#ssmm-wrapper #ssmm_trigger input:checked ~ ul {
  opacity: 1;
  z-index: 1200;
}