un-btn {
	display: contents;
}

un-btn button {
	appearance: none;
	background: none;
	outline: none;
	border: none;
	margin: 0;
	padding: 0;
}

un-btn[active] .bar.one {
	box-shadow: 0px 3px 13px rgba(0, 0, 0, .4);
	transform: translate(0, 14px) rotate(45deg);
}

un-btn[active] .bar.two {
	background-color: transparent;
	box-shadow: none;
	transform: translateX(-55px);
}

un-btn[active] .bar.three {
	box-shadow: 0px 3px 13px rgba(0, 0, 0, .4);
	transform: translate(0, -14px) rotate(-45deg);
}

un-btn .trigger:hover {
	animation: wiggle 2s linear infinite;
	/*filter: hue-rotate(180deg);*/
}

un-btn .trigger {
	cursor: pointer;
	width: 40px;
	z-index: 3;
}

un-btn .bar {
	background-color: var(--page-color-2);
	border-radius: 25px;
	box-shadow: 0px 3px 13px rgba(0, 0, 0, .3);
	height: 5px;
	transition-duration: 250ms;
	transition-timing-function: cubic-bezier(.13, .24, .35, 1.64);
}

un-btn .bar.one,
un-btn .bar.two {
	margin-bottom: 7px;
}

@keyframes wiggle {

	0%,
	7% {
		transform: rotateZ(0);
	}

	15% {
		transform: rotateZ(-15deg);
	}

	20% {
		transform: rotateZ(10deg);
	}

	25% {
		transform: rotateZ(-10deg);
	}

	30% {
		transform: rotateZ(6deg);
	}

	35% {
		transform: rotateZ(-4deg);
	}

	40%,
	100% {
		transform: rotateZ(0);
	}
}