/* Patterns - Navigation - Submenu */
////
/// @group Patterns-Submenu
/// Patterns - Navigation - Submenu

///
.osui-submenu {
	cursor: pointer;
	display: inline-flex;
	position: relative;

	// Service Studio Preview
	& {
		-servicestudio-height: auto !important;
	}

	// Multi level menu
	&:first-of-type:not(.osui-submenu--is-open) {
		.osui-submenu {
			&__items {
				display: none;
				opacity: 0;
			}

			&__header .osui-submenu__header__icon {
				top: -1px;
				-webkit-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}
		}
	}

	&:hover {
		.osui-submenu__header__icon:before {
			border: var(--border-size-s) solid get-border-color('neutral-9');
			border-right: 0;
			border-top: 0;
		}
	}

	&.active {
		&--is-open {
			.osui-submenu__header__item {
				color: get-text-color('primary');
			}
		}

		.osui-submenu {
			&__header {
				border-bottom: var(--border-size-m) solid get-border-color('primary');

				&__item {
					&,
					a {
						color: get-text-color('primary');
						text-decoration: none;
					}
				}

				&__icon:before {
					border: var(--border-size-s) solid get-border-color('primary');
					border-right: 0;
					border-top: 0;
				}
			}
		}
	}

	&--is-open {
		.osui-submenu {
			&__header {
				&__icon {
					top: 3px;
					transform: rotate(135deg);
				}
			}

			&__items {
				opacity: 1;
				pointer-events: auto;
				transform: translateY(0px);
			}
		}
	}

	&--is-dropdown {
		.osui-submenu__header__icon {
			display: inline-flex;
		}
	}

	&--is-hover {
		&.osui-submenu {
			&--is-open {
				.osui-submenu {
					&__header {
						position: relative;

						// This is needed for the OpenOnHover feature, to fit in the gap between submenu_header and items
						&:after {
							content: '';
							height: 100%;
							left: 0;
							position: absolute;
							right: 0;
							top: 100%;
						}
					}
				}
			}
		}
	}

	&__header {
		align-items: center;
		border-bottom: var(--border-size-m) solid get-border-color('transparent');
		border-top: var(--border-size-m) solid get-border-color('transparent');
		display: flex;
		padding: var(--space-none) var(--space-s);
		transition: all 150ms linear;

		&__icon {
			display: none;
			margin-left: var(--space-s);
			position: relative;
			top: -1px;
			transform: rotate(-45deg);
			transition: all 150ms linear;

			&:before {
				border: var(--border-size-s) solid get-border-color('neutral-8');
				border-right: 0;
				border-top: 0;
				box-sizing: border-box;
				content: '';
				height: 6px;
				transition: all 150ms linear;
				width: 6px;
			}
		}

		&__item {
			align-items: center;
			color: get-text-color('neutral-9');
			display: inline-flex;
			height: 100%;
			position: relative;
			transition: all 150ms linear;

			-servicestudio-min-width: 100px;
			-servicestudio-margin-left: calc(var(--space-s) * -1);

			a {
				align-items: center;
				color: get-text-color('neutral-8');
				display: flex;
				height: 100%;

				&:hover {
					text-decoration: none;
				}
			}
		}
	}

	&__items {
		background-color: get-background-color('neutral-0');
		border: var(--border-size-s) solid get-border-color('neutral-4');
		border-radius: var(--border-radius-soft);
		box-shadow: var(--shadow-m);
		display: flex;
		flex-direction: column;
		left: 0;
		min-width: 100px;
		opacity: 0;
		padding: var(--space-s) var(--space-none);
		pointer-events: none;
		position: absolute;
		top: calc(100% + var(--space-xs));
		transform: translateY(-8px);
		transition: all 130ms ease-out;
		z-index: var(--layer-global-elevated);

		// Service Studio Preview
		& {
			-servicestudio-opacity: 1 !important;
			-servicestudio-pointer-events: auto !important;
			-servicestudio-top: 100% !important;
			-servicestudio-transform: translateY(0px) !important;
		}

		a {
			color: get-text-color('neutral-8');
			margin: 0;
			padding: var(--space-s) var(--space-base);
			white-space: nowrap;

			&.active {
				color: get-text-color('primary');
			}
		}
	}
}

///
.layout {
	&:not(.layout-side) {
		.app-menu-links {
			.osui-submenu a {
				border-bottom: none;
			}
		}
	}

	.header .osui-submenu__items {
		-servicestudio-display: none !important;
	}
}

///
.layout-side {
	.app-menu-links {
		.osui-submenu a {
			border-left: none;
		}

		.osui-submenu {
			flex-direction: column;
			width: 100%;

			&.active .osui-submenu__header {
				border-left: var(--border-size-m) solid get-border-color('primary');
			}

			&--is-open > .osui-submenu__items {
				display: flex;
			}

			.osui-submenu__header {
				border-bottom: 0;
				border-left: var(--border-size-m) solid get-border-color('transparent');
				border-top: 0;
				padding: var(--space-s) var(--space-m);

				&__item {
					flex: 1;
				}
			}

			&__items {
				border: none;
				box-shadow: none;
				display: none;
				opacity: 1;
				padding: var(--space-xs) var(--space-m);
				pointer-events: auto;
				position: relative;
				top: 0;
				transform: translateY(0);

				a {
					padding: var(--space-s) var(--space-base);
				}
			}
		}
	}
}

///
.layout-side,
.menu-visible {
	.app-menu-links {
		.osui-submenu__header a {
			padding: var(--space-none);
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.osui-submenu {
		&:hover {
			.osui-submenu__header__item {
				color: get-text-color('neutral-9');
			}
		}

		&.active {
			.osui-submenu__header:hover .osui-submenu__header__item {
				color: get-text-color('primary');
			}
		}

		&__header {
			&:hover {
				border-bottom: var(--border-size-m) solid get-border-color('primary');
			}

			&__item {
				a:hover {
					color: get-text-color('neutral-9');
				}
			}
		}

		&__items {
			a {
				&:hover {
					background-color: get-background-color('neutral-2');
					color: get-text-color('neutral-9');
				}

				&.active:hover {
					color: get-text-color('primary');
				}
			}
		}
	}

	.layout:not(.layout-side) {
		.app-menu-links {
			.osui-submenu {
				height: 100%;
			}
		}
	}

	.layout-side {
		.app-menu-links {
			.osui-submenu {
				&__header {
					&:hover {
						border-bottom: none;
						border-left: var(--border-size-m) solid get-border-color('primary');
					}
				}
			}
		}
	}
}

.has-accessible-features .osui-submenu:focus-within {
	-webkit-box-shadow: 0 0 0 3px get-background-color('focus-outer');
	box-shadow: 0 0 0 3px get-background-color('focus-outer');
	outline: 0;
}

///
.tablet,
.phone {
	.has-accessible-features .osui-submenu:focus-within {
		-webkit-box-shadow: 0 0 0 3px get-background-color('focus-outer');
		box-shadow: 0 0 0 3px get-background-color('focus-outer');
		outline: 0;
	}

	.osui-submenu {
		flex-direction: column;
		width: 100%;

		&.active .osui-submenu__header {
			border-left: var(--border-size-m) solid get-border-color('primary');
			border-bottom: 0;
		}

		&--is-open .osui-submenu__items {
			display: flex;
		}

		&__header {
			border-bottom: 0;
			border-left: var(--border-size-m) solid get-border-color('transparent');
			border-top: 0;
			padding: var(--space-s) var(--space-m);

			&__item {
				flex: 1;
			}
		}

		&__items {
			border: none;
			box-shadow: none;
			display: none;
			opacity: 1;
			padding: var(--space-xs) var(--space-m);
			pointer-events: auto;
			position: relative;
			top: 0;
			transform: translateY(0);
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.layout-side {
		.osui-submenu {
			.osui-submenu__header {
				border-left: 0;
				border-right: var(--border-size-m) solid get-border-color('transparent');
			}

			&.active .osui-submenu__header {
				border-left: var(--border-size-none);
				border-right: var(--border-size-m) solid get-border-color('primary');
			}
		}
	}

	&.tablet,
	&.phone {
		.osui-submenu {
			&.active .osui-submenu__header {
				border-left: 0;
				border-right: var(--border-size-m) solid get-border-color('primary');
			}

			.osui-submenu__header {
				border-left: 0;
				border-right: var(--border-size-m) solid get-border-color('transparent');
			}
		}
	}

	.osui-submenu__header__icon {
		margin-left: var(--space-none);
		margin-right: var(--space-s);
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.layout:not(.layout-side) .app-menu-links .osui-submenu a {
		border-top: none;
		border-bottom: none;
	}

	.osui-submenu__header {
		border-top: none;
	}
}