.menu__link {
	position: relative;
	isolation: isolate;
	transition: color 160ms ease, background-color 160ms ease;
}

.menu__link:not(.active)::before,
.menu__link:not(.active)::after {
	content: "";
	position: absolute;
	inset: -5px -7px;
	pointer-events: none;
	opacity: 0;
	transform: scale(.86);
	transition: opacity 160ms ease, transform 180ms cubic-bezier(.2, .8, .2, 1);
}

.menu__link:not(.active)::before {
	background:
		linear-gradient(#202323, #202323) left top / 8px 1px no-repeat,
		linear-gradient(#202323, #202323) left top / 1px 8px no-repeat,
		linear-gradient(#202323, #202323) right bottom / 8px 1px no-repeat,
		linear-gradient(#202323, #202323) right bottom / 1px 8px no-repeat;
}

.menu__link:not(.active)::after {
	background:
		linear-gradient(#ffd400, #ffd400) right top / 8px 1px no-repeat,
		linear-gradient(#ffd400, #ffd400) right top / 1px 8px no-repeat,
		linear-gradient(#ffd400, #ffd400) left bottom / 8px 1px no-repeat,
		linear-gradient(#ffd400, #ffd400) left bottom / 1px 8px no-repeat;
}

.menu__link:not(.active):hover::before,
.menu__link:not(.active):hover::after,
.menu__link:not(.active):focus-visible::before,
.menu__link:not(.active):focus-visible::after {
	opacity: 1;
	transform: scale(1);
}

.menu__link:not(.active):hover,
.menu__link:not(.active):focus-visible {
	color: #202323;
}

.menu__link:not(.active):active::before,
.menu__link:not(.active):active::after {
	transform: scale(.94);
}