.menu {
  background-color: var(--color-dark-blue);
  border-radius: 999px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: block;
  height: 64px;
  left: 5px;
  position: fixed;
  top: 5px;
  transform: translateX(-100px);
  transition:
    filter var(--transition-md) ease-out,
    opacity var(--transition-md) ease-out,
    transform var(--transition-md) ease-out;
  width: 64px;
  will-change: opacity, transition;
  z-index: 5;
}

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

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

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

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

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

.menu.is-visible {
  transform: translateX(0);
}

.menu.is-minimized {
  opacity: 0.5;
  transform: translateX(-20px) translateY(-20px);
}

/**
 * Hover and focus states
 */

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