/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT
  
----------------------------------------------------------------------------- */

// vars

$button-width: 48px;                    // The width of the button area
$button-height: 48px;                   // The height of the button area
$bar-thickness: 3px;                    // The thickness of the button bars
$button-pad: 8px;                      // The left/right padding between button area and bars.
$button-bar-space: 6px;                // The spacing between button bars
$button-transistion-duration: 0.3s;     // The transition duration
$color-bar: color("blue","base");

.toggle-menu {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: $button-width;
	height: $button-height;
	cursor: pointer;
	transition: background $button-transistion-duration;
	
	span {
		display: block;
		position: absolute;
		top: ($button-height / 2) - ($bar-thickness / 2);
		left: $button-pad;
		right: $button-pad;
		height: $bar-thickness;
		background: $color-bar;
		transition: background 0s $button-transistion-duration;
		
		&:before,
		&:after {
			position: absolute;
			display: block;
			left: 0;
			width: 100%;
			height: $bar-thickness;
			background: $color-bar;
			content: "";
			transition-duration: $button-transistion-duration, $button-transistion-duration;
			transition-delay: $button-transistion-duration, 0s;
		}
		
		&:before {
			top: -$bar-thickness - $button-bar-space;
			transition-property: top, transform;
		}
		&:after {
			bottom: -$bar-thickness - $button-bar-space;
			transition-property: bottom, transform;
		}
	}
	
	&.active {
		span {
			background: none !important;
			
			&:before {
				top: 0;
				transform: rotate(45deg);
			}
			&:after {
				bottom: 0;
				transform: rotate(-45deg);
			}
			&:before,
			&:after {
				transition-delay: 0s, $button-transistion-duration;
			}
		}
	}
}