.main-menu__toggle {
  padding: 0;
  margin-bottom: 1rem;
  border-radius: 18px;
  background: transparent;
  border: 0 transparent;
  width: 36px;
  height: 36px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.main-menu__toggle .bar {
  transition: all 0.2s ease-in-out;
  fill: var(--color-text-light);
}
.main-menu__toggle.active .bar--first {
  rotate: 45deg;
  transform: translate(5px, -7px);
}
.main-menu__toggle.active .bar--second {
  opacity: 0;
}
.main-menu__toggle.active .bar--third {
  rotate: -45deg;
  transform: translate(-11px, -1px);
}