.burger {
  background-color: transparent;
  border: none;
  width: 3.7rem;
  height: 3.7rem;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 8;

  &::before,
  &::after {
    content: '';
    position: absolute;
    height: 3px;
    left: 0;
    background-color: #9263e3;
    transition: all .2s ease-in-out;
  }

  &::before {
    top: 25%;
    width: 100%;
  }

  &::after {
    bottom: 25%;
    width: 70%;
  }

  &.active {
    &::before,
    &::after {
      background-color: #fff;
    }

    &::before {
      top: 45%;
      transform: rotate(45deg);
    }

    &::after {
      bottom: 45%;
      width: 100%;
      transform: rotate(-45deg);
    }
  }
}