@import '../../../../styles/variables';

.APMHamburger {
	padding: 18px 36px 14px 24px;
	height: 60px;
	width: 100%;
	border: none;
	background-color: white;
	margin-top: -4px;
	transition: all .1s ease;

	&-inner {
		height: 2px;
		background-color: @steel-blue;
		width: 18px;
		transition: hover .1s ease;

		&:before,
		&:after {
			content: '';
			position: absolute;
			width: 18px;
			height: 2px;
			background-color: @steel-blue;
			left: 24px;
			transition: all .1s ease;
			transition: transform .2s ease;
		}

		&:before {
			top: 22px;
		}

		&:after {
			bottom: 22px;
		}

		&-open {
			height: 0;
			transition: none;

			&:before,
			&:after {
				top: 50%;
			}

			&:before {
				transform: translateY(-50%) rotate(-45deg);
			}

			&:after {
				transform: translateY(-50%) rotate(-135deg);
			}

		}
	}

	&:active,
	&:focus {
		outline: none;
	}

	&:hover {
		.APMDropdown-menu-trigger-inner {
			background-color: @blue-gray-dark;

			&:before,
			&:after {
				background-color: @blue-gray-dark;
			}
		}
	}

	&:active {
		.APMDropdown-menu-trigger-inner {
			background-color: @blue-gray-charcoal;

			&:before,
			&:after {
				background-color: @blue-gray-charcoal;
			}
		}
	}
}