button[is="nav-button"] {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: none;
  background-color: transparent;
  z-index: 1000;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    height: 3px;
    width: 100%;
    background-color: #000;
    border-radius: 2px;
    position: absolute;
    top: 0.8rem;
    left: 0;
    transform-origin: 63%;
    transition: transform 0.3s, width 0.3s;
  }

  &::after {
    top: 1.2rem;
  }

  &.active {
    &::before {
      transform: rotate(-45deg);
    }

    &::after {
      transform: rotate(45deg);
    }
  }
}