.nav-toggle {
	position: relative;
	background: transparent;
	width: 25px;
	height: 16px;
	display: block;
	outline: 0;
	grid-column-start: 2;
	cursor: pointer;

	.js-body-nav-toggle & {
		width: 27px;
		height: 17px;
	}
}

.nav-toggle__bar {
	transition: 0.3s all;
	width: 100%;
	height: 2px;
	background: var(--gray);
	position: absolute;
	left: 0;

	.nav-toggle:hover &,
	.nav-toggle:focus & {
		background-color: var(--gray);
	}

	&:nth-child(1) {
		top: 0;
	}

	&:nth-child(2) {
		top: 7px;
	}

	&:nth-child(3) {
		bottom: 0;
	}

	.js-body-nav-toggle & {
		background: var(--gray);
		border-radius: 100px;

		&:nth-child(1) {
			transform: rotate(45deg) translateX(5px) translateY(5px);
		}

		&:nth-child(2) {
			opacity: 0;
		}

		&:nth-child(3) {
			transform: rotate(-45deg) translateX(5px) translateY(-6px);
		}
	}
}