$icon-padding: 1rem;

.burger {
  @include size($content-margin);
  @include flex-center;

  // background-color: color('white');
  // margin-top: 3.5rem;

  &__icon {
    &,
    &::before,
    &::after {
      @include size($content-margin - $icon-padding, 2px);
      border-radius: 1000px;
      background-color: color('white');
      display: block;
      transition: all 0.2s;
    }

    &::before,
    &::after {
      content: '';
    }

    &::before {
      transform: translateY(-1.2rem);
    }
    &::after {
      transform: translateY(1.2rem);
    }
  }

  &:hover &__icon::before {
    transform: translateY(-1.3rem);
  }

  &:hover &__icon::after {
    transform: translateY(1.3rem);
  }

  &--active {
    &__icon::before {
      transform: rotate(135deg);
    }

    &__icon::after {
      transform: rotate(-135deg);
    }
  }
}