/**
 * @file
 * This file contains the Ultimenu hamburger skin for the main menu.
 */

/** This double is another sample to work around theme compatibility issue. */
.button.button--ultimenu {
  position: fixed;
  z-index: 9999;
  top: 15px;
  right: 15px;
  display: block;
  width: 42px;
  height: 40px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  text-align: center;
  text-indent: -999px;
  border: 0;
  border-radius: 2px;
  background: #555;
  font-size: 0;
}

.button.button--ultimenu:hover,
.button.button--ultimenu:active,
.button.button--ultimenu:focus {
  background: #111;
}

/** Inspired by callmenick. */
.button--ultimenu .bars,
.button--ultimenu .bars::before,
.button--ultimenu .bars::after {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  width: 32px;
  height: 4px;
  content: "";
  pointer-events: none;
  background-color: #fff;
}

.button--ultimenu .bars {
  top: 18px;
  right: 5px;
  left: 5px;
  height: 4px;
  transition: background-color 0s 0.3s;
}

.button--ultimenu .bars::before,
.button--ultimenu .bars::after {
  transition-delay: 0.3s, 0s;
  transition-duration: 0.3s, 0.3s;
}

.button--ultimenu .bars::before {
  top: -10px;
  transition-property: top, transform;
}

.button--ultimenu .bars::after {
  bottom: -10px;
  transition-property: bottom, transform;
}

.is-ultimenu-expanded .button--ultimenu .bars {
  background-color: transparent;
}

.is-ultimenu-expanded .button--ultimenu .bars::before,
.is-ultimenu-expanded .button--ultimenu .bars::after {
  transition-delay: 0s, 0.3s;
}

.is-ultimenu-expanded .button--ultimenu .bars::before {
  top: 0;
  transform: rotate(45deg);
}

.is-ultimenu-expanded .button--ultimenu .bars::after {
  bottom: 0;
  transform: rotate(-45deg);
}

/**
 * 944px+ with 16px base font.
 * .is-ultimenu-canvas--hover is only available if off-canvas is not enabled for
 * both modile and desktop.
 */
@media all and (min-width: 59em) {
  /** Hide mobile menu, if off-canvas is DISABLED for desktop. */
  .is-ultimenu-canvas--hover .button.button--ultimenu {
    display: none;
  }
}