.a-burger {
	@media #{$from-tablet}{ display: none; }
	$height: 2px;
	$width: 22px;
	$color: #000;
	$offset: 250%;
	
	height: 100%; width: $width; position: absolute; top: 0; right: 3rem;
	@media #{$to-tablet}{ right: 0 }

	&__link { z-index: 10; position: overlay() }

	&__icon {
		position: absolute; width: 100%; height: $height; left: 0;
		top: calc(50% - #{$height/2}); background-color: $color;

		&, &:before, &:after { transition: allow(transform opacity, $speed-slow) }

		&:after { transform: translateY($offset) }
		&:before { transform: translateY(-$offset) }

		&:after, &:before {
			position: absolute; content: ''; width: 100%; height: 100%;
			left: 0; background-color: $color;
		}

		.burger-is-open &{
			transform: rotate(135deg);

			&:after, &:before { transform: none }
			&:before { transform: rotate(90deg) }
			&:after { opacity: 0 }
		}
	}
}