.menu {
  background-color: var(--color-dark-blue);
  border-radius: 50%;
  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: block;
  height: var(--menu-size);
  left: var(--space-xxs);
  position: fixed;
  top: var(--space-xxs);
  opacity: 0;
  transition: filter var(--transition-md) ease-out,
    opacity var(--transition-md) ease-out,
    transform var(--transition-md) ease-out;
  width: var(--menu-size);
  will-change: opacity, transition;
  z-index: 5;
}

@media (--viewport-xl) {
  .menu {
    height: var(--menu-size-xl);
    width: var(--menu-size-xl);
    left: 1vw;
    top: 1vw;
  }
}

.logged-in .menu {
  top: calc(var(--space-xxs) + 48px);
}

@media (--viewport-wordpress-admin-bar) {
  .logged-in .menu {
    top: calc(var(--space-xxs) + 34px);
  }
}

.menu__line {
  background-color: #fff;
  border-radius: 4%;
  height: 4%;
  left: 25%;
  position: absolute;
  right: 25%;
  transform: translateY(-50%);
}

.menu__line:nth-of-type(1) {
  top: 33.34%;
}

.menu__line:nth-of-type(2) {
  top: 50%;
}

.menu__line:nth-of-type(3) {
  top: 66.67%;
}

.menu__text {
  left: -10000px;
  position: absolute;
  top: -10000px;
}

.menu.is-visible {
  opacity: 1;
}

.menu.is-minimized {
  opacity: 0.5;
  transform: translate(calc(var(--space-sm) * -1), calc(var(--space-sm) * -1));
}

/**
 * Hover and focus states
 */

.menu:focus,
.menu:hover {
  outline: none;
  opacity: 1;
  filter: saturate(1.5) contrast(1.5);
  transform: scale(1.1);
}