[class*="header-menu"] {

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

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

	&[data-type="type-2"],
	&[data-type="type-3"],
	&[data-type="type-4"] {
		> ul > li {
			display: flex;
			align-items: center;

			> a {
				height: var(--height);
			}
		}
	}

	// type 2
	&[data-type="type-2"] > ul > li {

		> a {
			position: relative;

			&:after {
				position: absolute;
				content: '';
				left: 0;
				right: 0;
				bottom: 0;
				margin: 0 auto;
				width: 0;
				height: 2px;
				opacity: 0;
				background: var(--menuIndicatorActiveColor);
				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);
			}
		}

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

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

	// menu 4
	&[data-type="type-4"] > ul > li {
		> a {
			position: relative;

			&:before, &:after {
				position: absolute;
				content: '';
				width: 100%;
				left: 0;
				height: 2px;
				opacity: 0;
				background: var(--menuIndicatorActiveColor);
				transition: opacity 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: 7px;
			}

			&:after {
				bottom: 7px;
			}
		}

		> a:hover,
		&.current-menu-item > a,
		&.current-menu-ancestor > a {
			&:before {
				top: 0;
				opacity: 1;
			}

			&:after {
				bottom: 0;
				opacity: 1;
			}
		}
	}
}


// stretch menu
[data-stretch] {
	width: 100%;

	> ul {
		justify-content: space-between;
	}
}