// common
[data-menu] > ul > li {
	display: flex;
	align-items: center;
	
	> a {
		&:before, &:after {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			height: 2px;
			opacity: 0;
			background-color: var(--menu-indicator-active-color);
			transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						width 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						top 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						bottom 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		&:before {
			top: var(--menu-indicator-y-position, 0);
		}

		&:after {
			bottom: var(--menu-indicator-y-position, 0);
		}
	}
}


// type 1
[data-menu="type-1"] > ul > li {
	&:first-child > a {
		padding-left: 0;
	}

	&:last-child > a {
		padding-right: 0;
	}
}


// type 2
[data-menu="type-2"] > ul > li {
	> a:after {
		content: '';
	}

	> a:hover,
	&.current-menu-item > a,
	&.current-menu-ancestor > a {
		&:after {
			opacity: 1;
			width: 100%;
		}
	}
}


// type 3
[data-menu="type-3"] > ul > li {
	> a:hover,
	&.current-menu-item > a,
	&.current-menu-ancestor > a {
		color: var(--colorHoverType3);
		background-color: var(--menu-indicator-active-color);
	}
}


// type 4
[data-menu="type-4"] > ul > li {
	> a {
		&:before, &:after {
			--menu-indicator-y-position: 10px;
			content: '';
		}
	}

	> a:hover,
	&.current-menu-item > a,
	&.current-menu-ancestor > a {
		&:before, &:after {
			--menu-indicator-y-position: 0px;
			opacity: 1;
		}
	}
}