/**
 * @file
 * See ultimenu.css for details.
 *
 * Note the `transform` transitions, it is faster and smoother than `left` ones.
 */

/** The #header alike element, out of canvas by default, can exist once. */
html.is-ultimenu--active .is-ultimenu__canvas-off {
  left: 0;
  max-width: 100%;
  transition: transform 500ms ease;
  transform: translateY(-100%);
}

html.is-ultimenu.is-ultimenu--expanded .is-ultimenu__canvas-off {
  transform: translateY(0);
}

/** Any element below, pushed out of canvas once the #header is in.
Do not set transform here for compatibiity with fixed Jumper.module. */
html.is-ultimenu--active .is-ultimenu__canvas-on {
  position: relative;
  transition: transform 500ms ease;
}

html.is-ultimenu--active.is-ultimenu--hiding .is-ultimenu__canvas-on {
  transform: translateX(0);
}

html.is-ultimenu.is-ultimenu--expanded .is-ultimenu__canvas-on {
  transform: translateY(600%);
}

/**
 * 944px = 58.999em with 16px base font.
 * We are here at mobile devices.
 */
@media (hover: none) {
  /** The #header alike element, out of canvas by default, can exist once. */
  html.is-ultimenu .is-ultimenu__canvas-off {
    left: 0;
    max-width: 100%;
    transform: translateY(-100%);
  }
}