/**
 * @file
 * This is the base CSS rules for anything off-canvas.
 *
 * See ultimenu.css for details.
 */

/* stylelint-disable declaration-no-important */
/** Global off-canvas rules. */
.is-ultimenu__backdrop {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  -ms-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  opacity: 0;
  background-color: transparent;
}

.is-ultimenu--expanded .is-ultimenu__backdrop,
.is-ultimenu--hiding .is-ultimenu__backdrop {
  z-index: 9997;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh) * 100);
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
  opacity: 1;
  background-color: var(--ultibackdrop);
}

/** If off-canvas is enabled for both mobile and desktop. */
.is-ultimenu--active {
  /** Necessary for `overflow: hidden` when expanded below. */
  position: relative;
}

/** Hide body overflow when off-canvas is being expanded. */
.is-ultimenu--expanded,
.is-ultimenu--hiding {
  /* Do not use transform3d until required, else breaking fixed positioning. */
  transform: translate3d(0, 0, 0);
}

/* Fixed height is required to avoid scrolling up when at bottom page. */
html.is-ultimenu--expanded,
html.is-ultimenu--expanded > body {
  overflow: hidden;
  height: 100vh;
  height: calc(var(--vh) * 100);
}

/** The #header element, safe whether enabled for desktop, or mobile only. */
.is-ultimenu__canvas-off,
.is-ultimenu .is-ultimenu__canvas-off {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  backface-visibility: hidden;
}

.is-ultimenu__canvas-off .ultimenu--offcanvas {
  margin: 0;
  padding: 0;
}

/** The #header alike element, if activated for both desktop and mobile. */
.is-ultimenu--active .is-ultimenu__canvas-off {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -100%;
  overflow: hidden;
  /** Desktop needs the exact pixel to avoid too wide off-canvas. */
  max-width: 320px;
  height: 100%;
  height: 100vh;
  height: calc(var(--vh) * 100);
  padding: 0;
  transition: all 500ms ease;
  /** Adjust and remove !important accordingly. This is to override Bartik. */
  background: var(--ulticanvas) !important;
}

.is-ultimenu--expanded .is-ultimenu__canvas-off {
  left: 0;
  overflow-y: auto;
}

.is-ultimenu .is-ultimenu__canvas-off,
.is-ultimenu--expanded .is-ultimenu__canvas-off,
.is-ultimenu--hiding .is-ultimenu__canvas-off {
  z-index: 9998;
}

/** Any element below #header alike. */
.is-ultimenu--active .is-ultimenu__canvas-on {
  backface-visibility: hidden;
  position: relative;
}

/* With toolbar. */
.is-ultimenu--expanded .toolbar-fixed .is-ultimenu__backdrop,
.is-ultimenu--hiding .toolbar-fixed .is-ultimenu__backdrop {
  z-index: 500;
}

/* Below toolbar. */
.is-ultimenu .toolbar-fixed .is-ultimenu__canvas-off {
  z-index: 501;
}