.hamburger {
  border: none;
  outline: none;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-image: var(--menu-hamburger);
  background-color: transparent;
  cursor: pointer;
}

.hamburger:hover {
  opacity: 0.7;
}

.logo,
.reducedLogo {
  display: flex;
  position: relative;
  z-index: 3;
  padding: 20px 18px 20px 18px;
  border-bottom: 1px solid var(--white-border);
}

.reducedLogo {
  flex-direction: column;
}

.mixerOn {
  margin: 5px;
  width: 16px;
  height: 16px;
  border: none;
  outline: none;
  background-color: transparent;
  background-image: var(--menu-mixer-icon);
  background-size: 16px 16px;
  cursor: pointer;
  /* XXX Need a different animation method due to performance of this
   animation: spin 1s linear infinite; 
  */
}

.backgroundJobTooltip {
  width: 20rem;
}

.mainnet {
  border: none;
  outline: none;
  float: left;
  height: 20px;
  width: 150px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: var(--mainnet-logo);
  background-color: transparent;
}

.testnet {
  border: none;
  outline: none;
  height: 20px;
  width: 150px;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: var(--testnet-logo);
  background-color: transparent;
}

.reducedArrow {
  border: none;
  outline: none;
  height: 20px;
  width: 20px;
  background-repeat: no-repeat;
  background-image: var(--menu-arrow);
  background-color: transparent;
  cursor: pointer;
  margin-left: 85px;
}

.reducedArrow:hover {
  opacity: 0.7;
}

@media (--sm-viewport) {
  .logo {
    flex-direction: row-reverse;
  }

  .reducedArrow {
    margin-left: 0;
    margin-right: auto;
  }
}
