/* =============================================================================
- Menu Widget
============================================================================= */
.gwel-menu-widget {
	ul {
		display: flex;
		flex-direction: var(--gwel-menu--orientation, row);
		gap: var(--gwel-menu--item-s, 12px);
		list-style: none;
		padding: 0;
		margin: 0;
		a {
			position: relative;
			padding: var(--gwel-menu--items-p, 0px);
			color: var(--gwel-menu--item-c);
			span {
				position: relative;
				z-index: 3;
			}
		}
	}

	&.gwel-direction-row {
		.gwel-menu {
			justify-content: var(--gwel-menu--align);
		}
	}
	&.gwel-direction-column {
		.gwel-menu {
			align-items: var(--gwel-menu--align);
		}
		.gwel-sub-menu {
			padding-top: var(--gwel-menu--submenu-item-s, 12px);
			display: none;
			ul {
				gap: var(--gwel-menu--submenu-item-s, 12px);
			}
		}
	}
	.gwel-link-wrapper {
		display: flex;
		align-items: center;
		gap: var(--gwel-menu--arrow-offset-h, 6px);
		.gwel-arrow {
			width: var(--gwel-menu--arrow-size,0.300em);
			height: var(--gwel-menu--arrow-size,0.300em);
			position: relative;
			margin-top: var(--gwel-menu--arrow-offset-v,-0.150em);
			.gwel-arrow-icon {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 100%;
				transform-origin: center;
				border-bottom: var(--gwel-menu--arrow-border-w, 1px) solid currentColor;
				border-right: var(--gwel-menu--arrow-border-w, 1px) solid currentColor;
				transform: rotate(45deg) translateY(-50%);
				transition: transform .3s ease;
			}
		}
		&.gwel-open {
			.gwel-arrow {
				transform: scaleY(-1);
			}
		}
	}
	.gwel-underline-hover {
		a {
			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: var(--gwel-underline-position, 0px);
				width: 100%;
				border-top-width: var(--gwel-underline-h, 0.143em);
				border-top-style: solid;
				border-top-color: var(--gwel-underline-c, #000);
				transform: scaleX(0);
				transform-origin: right center;
				transition: transform .25s cubic-bezier(.785,.135,.15,.86);
				z-index: 1;
			}
			&:hover:after {
				transform: scaleX(1);
				transform-origin: left center;
			}
		}
	}
}