.style-border-bottom > ul > li >,
.sm-style-border-bottom .sub-menu {

	.wrap::after {
		bottom: 0;
	}
}


.style-border-top > ul > li >,
.sm-style-border-top .sub-menu {

	.wrap::after {
		top: 0;
	}
}

.sm-style .sub-menu,
.m-style > ul > li > {

	.wrap:hover {

		&::after {
			width: 100%;
		}
	}

	.wrap::after {
		position: absolute;
		content: "";
		margin: 0 auto;
		width: 0;
		height: 2px;
		transition: all 0.3s ease;
		right: 0;
		left: 0;
		pointer-events: none;
		background-color: var(--hovercolor, var(--nv-primary-accent, currentColor));
	}
}


.style-full-height > ul > li >,
.sm-style-full-height .sub-menu {

	.wrap {
		z-index: 1;

		&::after {
			top: 0;
			bottom: 0;
			left: calc(var(--spacing) / 2 * -1);
			right: calc(var(--spacing) / 2 * -1);
			height: 100%;
			z-index: -1;
		}
	}

	.wrap:hover {

		svg {
			color: var(--hovertextcolor, var(--color));
		}

		> a {
			color: currentColor;

			&,
			+ .caret-wrap,
			span,
			i {
				color: var(--hovertextcolor, var(--color)) !important;
			}

			&::after {
				width: calc(100% + var(--spacing));
			}
		}
	}

	a {
		z-index: 1;

		&::after {
			top: 0;
			bottom: 0;
			left: calc(var(--spacing) / 2 * -1);
			right: calc(var(--spacing) / 2 * -1);
			height: 100%;
			z-index: -1;
		}
	}
}

.sm-style-full-height .sub-menu a:hover {

	+ .caret svg {
		color: var(--hovertextcolor);
		position: relative;
		z-index: 1;
	}

	&::after {
		width: 100%;
	}
}
