[data-submenu] {
	position: relative;
}

// drop-down
.menu .sub-menu {
	position: absolute;
	z-index: 10;
	top: var(--top, 100%);
	margin-top: var(--marginTop);
	min-width: 100px;
	border-radius: var(--borderRadius);
	width: var(--width);
	background: var(--backgroundColor);
	box-shadow: var(--boxShadow);

	li {
		a {
			padding: var(--padding, 13px) 20px;
		}

		&.current-menu-item a {
			color: var(--linkHoverColor);
		}

		&:not(:last-child) {
			border-bottom: var(--dropDownDivider);
		}
	}

	// drop-down bridge
	&:before {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: var(--marginTop);
		transform: translateY(-100%);
	}
}

// first drop-down
.menu > [data-submenu='right'] > .sub-menu {
	left: calc(var(--menuItemsSpacing) / 2 - 20px);
}

.menu > [data-submenu='left'] > .sub-menu {
	right: calc(var(--menuItemsSpacing) / 2 - 20px);
}

[data-submenu] .menu-item:not([data-submenu]) {
	> ul {
		position: fixed;
	}
}

// other drop-downs
[data-submenu] [data-submenu='right'] {
	> ul {
		--top: 0;
		--marginTop: 0;

		right: -5px;
		margin-right: -100%;

		&:before {
			width: 5px;
			height: 100%;
			top: 0;
			left: -5px;
			right: initial;
		}
	}
}

[data-submenu] [data-submenu='left'] {
	> ul {
		--top: 0;
		--marginTop: 0;

		left: -5px;
		margin-left: -100%;

		&:before {
			width: 5px;
			height: 100%;
			top: 0;
			left: initial;
			right: -5px;
		}
	}
}

// child indicator
.child-indicator {
	margin-left: 5px;

	svg {
		fill: currentColor;
	}
}

[data-submenu] > a {
	justify-content: space-between;
}

[data-submenu] [data-submenu='left'] > a {
	.child-indicator svg {
		transform: rotate(90deg);
	}
}

[data-submenu] [data-submenu='right'] > a {
	.child-indicator svg {
		transform: rotate(-90deg);
	}
}