/* Patterns - Navigation - OverflowMenu */
////
/// @group Patterns-OverflowMenu
/// Patterns - Navigation - OverflowMenu

.osui-overflow-menu {
	display: inline-block;
	--osui-overflow-menu-min-width: 170px;
	--border-radius-rounded: 16px;

	&__trigger {
		--osui-floating-offset: var(--space-s);

		border: var(--border-size-s) solid get-border-color('transparent');
		border-radius: var(--osui-overflow-menu-shape);
		color: get-text-color('neutral-9');
		width: 32px;

		* {
			pointer-events: none;
		}
	}

	&--is-open {
		.osui-overflow-menu__trigger {
			background-color: get-background-color('neutral-4');
		}
	}

	&__balloon {
		min-width: var(--osui-overflow-menu-min-width);
		overflow: hidden;
		z-index: var(--layer-global-instant-interaction);

		a {
			color: get-text-color('neutral-9');

			&:hover {
				background: get-background-color('neutral-4');
				text-decoration: none;
			}

			// Service Studio Preview
			& {
				-servicestudio-align-items: center;
				-servicestudio-display: inline-flex !important;
				-servicestudio-color: get-text-color('neutral-9');
				-servicestudio-padding: var(--space-s) var(--space-base);
			}
		}

		// To make extensibility with ExtendedClass easier
		a:not([class^='padding-']) {
			padding: var(--space-s) var(--space-base);
		}
	}
}

// layer exception when a popup is open on the same screen
html:has(.popup-backdrop) .osui-overflow-menu__balloon {
	z-index: var(--layer-global-off-canvas);
}

.tablet,
.phone {
	.osui-overflow-menu {
		--border-radius-rounded: 100%;

		.osui-overflow-menu__trigger {
			&.btn {
				// Longer specificity to be able to always override default responsive styles for buttons
				width: 40px;
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.osui-overflow-menu__balloon {
		border: var(--border-size-s) solid get-border-color('neutral-7');

		a {
			&:hover {
				@include a11y-high-contrast-outline;
			}
		}
	}
}