/**
 * @file
 *
 * .is-ultimenu-canvas-off: #header or .region-primary-menu, etc.
 * .is-ultimenu-canvas-on: any sibling of #header.
 *
 * Tips: Use Modernizer.js to have graceful fallback for old browsers.
 * Note the `transform` transitions, it is faster and smoother than `left` ones.
 */

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

.is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-off {
  -ms-transform: translateX(0);
  transform: translateX(0);
}

/** Any element below, pushed out of canvas once the #header is in. */
.is-ultimenu-canvas--active .is-ultimenu-canvas-on {
  -ms-transform: translateX(0);
  transform: translateX(0);
  position: relative;
  transition: transform 500ms ease;
}

.is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {
  -ms-transform: translateX(320px);
  transform: translateX(320px);
}

/**
 * 944px with 16px base font.
 * .is-ultimenu-canvas--active is only available if off-canvas is enabled for
 * both desktop and mobile. Or a little later via JS if not. That's why we don't
 * rely on it for the smaller device to avoid FOUC.
 */
@media only screen and (max-width: 58.999em) {

  /** The #header alike element, out of canvas by default, can exist once. */
  .is-ultimenu-canvas .is-ultimenu-canvas-off {
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  .is-ultimenu-canvas.is-ultimenu-expanded .is-ultimenu-canvas-on {
    -ms-transform: translateX(82%);
    transform: translateX(82%);
  }
}