/**
 * Button state:
 *    1. normal (class name: [none])
 *    2. enlarging (class name: enlarging)
 *    3. shrinking (class name: shrinking)
 *    4. opening (class name: opening)
 *    5. closing (class name: closing)
 *    6. closed (class name: closed)
**/

/**
 * focus: closed -> closed + enlarging -> closed + shrinking -> opening -> ''
 * close: '' -> closing -> closed;
**/

menu-group {
  outline: 0;
  display: inline-block;
  height: 8rem;
  padding-left: 8rem;
  padding-right: 4rem;
  opacity: 1;
  /* we need to set border to none to remove the button border */
  border: none;
  /* the radius is still make button as round even if we don't have border */
  border-radius: 4rem;
  background-color: rgba(0, 0, 0, 0.5);

  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  position: relative;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
  transition-duration: 0.42s;
}

menu-group:before {
  content: " ";
  background-repeat: no-repeat;
  background-size: 5.4rem auto;
  background-position: 1.3rem center;
  width: 8rem;
  height: 8rem;
  display: inline-block;
  position: absolute;
  left: 0;

  transition-property: all;
  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
  transition-duration: 0.42s;
}

menu-group[rotate]:before {
  transform: rotate(360deg);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.25, 0, 0, 1.0);
  transition-duration: 0.42s;
}

menu-group[data-icon]:before {
  width: 5.4rem;
  left: 1.3rem;
  font-size: 5.4rem;
  line-height: 8rem;
  text-align: center;
  color: #ffffff;
  white-space: normal;
  top: 0;
}

menu-group[data-icon].switching-icon:before {
  font-size: 5.4rem;
  line-height: 8rem;
  text-align: center;
  color: #ffffff;
  /**
   * According to visual spec, we have falling down transition while icon
   * change.
   *
   * The trick is:
   *   1. to put the next icon at the top of current and slide icons down.
   *   2. to set transition duration to 0 here to elimiate the slide up
   *      transition.
  **/
  top: -8rem;
  transition: none;
}

menu-group.closed {
  padding-right: 0;

  transition-duration: 0.5s;
  background-color: rgba(0, 0, 0, 0.5);
}

menu-group.closed > * {
  display: none;
}

menu-group[rotate].closed:before {
  transform: rotate(0deg);
}

menu-group.opening {
  transition-duration: 0.72s;
  /* add the same padding-right of normal to make it run transition */
  padding-right: 4rem;
}

menu-group.opening:before {
  transition-duration: 0.72s;
}

menu-group.closing {
  transition-duration: 0.5s;
  padding-right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

menu-group[rotate].closing:before {
  transform: rotate(0deg);
  transition-duration: 0.5s;
}

menu-group.enlarging {
  opacity: 1;
  background-color: #ffffff;
  transform: scale(1.2);
  transition-duration: 0.2s;
}

menu-group.shrinking {
  transition-duration: 0.23s;
}