Single element animated burger menu

burger-menu.scss

$transition-default: .25s;
$transition-easing: ease-in-out;

@mixin burger-menu ($color: $color-link, $size: 1.5rem, $thickness: .25rem) {
	background-image: linear-gradient(to right, transparent, transparent 25%, $color 25%);
//	background-image: linear-gradient(to right, $color, $color); // Full width middle line
	background-size: 100% $thickness;
	background-position: left 50%;
	background-repeat: no-repeat;
	transition: background-position $transition-default $transition-default $transition-easing;

	display: block;
	position: relative;
	overflow: hidden;

	width: $size;
	height: $size;

	&::before,
	&::after {
		background: $color;

		display: block;
		content: "";

		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: $thickness;

		transition: top $transition-default $transition-default $transition-easing, transform $transition-default $transition-easing;
	}

	&::after {
		top: auto;
		bottom: 0;
		transition: bottom $transition-default $transition-default $transition-easing, transform $transition-default $transition-easing;
	}
}

@mixin burger-menu-open ($color: $color-link, $size: 1.5rem, $thickness: .25rem) {
	background-position: $size 50%;
	transition: background-position $transition-default $transition-easing;

	&::before {
		top: calc(50% - #{$thickness / 2});
		transform: rotate(45deg);
		transition: top $transition-default $transition-easing, transform $transition-default $transition-default $transition-easing;
	}

	&::after {
		bottom: calc(50% - #{$thickness / 2});
		transform: rotate(-45deg);
		transition: bottom $transition-default $transition-easing, transform $transition-default $transition-default $transition-easing;
	}
}