@use '../variables' as *;

.#{$prefix}menu {
	margin: 0;
	padding: var(--#{$prefix}menu-padding-y) var(--#{$prefix}menu-padding-x);
	color: var(--#{$prefix}menu-color);
	background-color: var(--#{$prefix}menu-background);

	&-item {
		position: relative;
		height: var(--#{$prefix}menu-item-height);
		padding: var(--#{$prefix}menu-item-padding-y) var(--#{$prefix}menu-item-padding-x);
		margin-inline: var(--#{$prefix}menu-item-margin-inline, 0px);
		font-size: var(--#{$prefix}menu-item-font-size);
		font-weight: var(--#{$prefix}menu-item-font-weight);
		border-radius: var(--#{$prefix}menu-item-border-radius);
		text-decoration: none;
		cursor: pointer;
		z-index: 0;
		display: flex;
		align-items: center;
		color: var(--#{$prefix}menu-item-color);
		background-color: var(--#{$prefix}menu-item-background);
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		gap: var(--#{$prefix}menu-item-gap);

		&:hover {
			text-decoration: none;
		}

		&--hoverable {
			cursor: pointer;
			user-select: none;
		}

		&--selected {
			&::before {
				content: '';
				position: absolute;
				left: calc(-1 * var(--#{$prefix}menu-item-margin-inline, 0px));
				top: 0;
				bottom: 0;
				width: var(--#{$prefix}menu-item-indicator-width, 0px);
				background-color: var(--#{$prefix}menu-item-indicator-color, transparent);
				z-index: 2;
			}
		}

		&--disabled {
			opacity: 0.6;
			pointer-events: none;
		}

		&__start-content {
			flex-shrink: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&__start-content,
		&__end-content {
			flex-shrink: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: calc(var(--#{$prefix}list-item-gap) * 0.5);
		}

		&__content {
			flex-grow: 1;
			z-index: 1;
			display: grid;
			overflow: hidden;
		}

		&__title {
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	&-group {
		position: relative;
		height: var(--#{$prefix}menu-group-height);
		padding: var(--#{$prefix}menu-group-padding-y) var(--#{$prefix}menu-group-padding-x);
		font-size: var(--#{$prefix}menu-group-font-size);
		font-weight: var(--#{$prefix}menu-group-font-weight);
		text-decoration: none;
		border-bottom: var(--#{$prefix}menu-group-border-width) solid var(--#{$prefix}menu-group-border-color);
		border-radius: var(--#{$prefix}menu-group-border-radius);
		display: flex;
		align-items: center;
		color: var(--#{$prefix}menu-group-color);
		background-color: var(--#{$prefix}menu-group-background);
		gap: var(--#{$prefix}menu-group-gap);

		&:hover {
			text-decoration: none;
		}

		&__icon {
			flex-shrink: 0;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&__content {
			flex-grow: 1;
			z-index: 1;
			display: grid;
			overflow: hidden;
		}

		&__title {
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
	}

	&-submenu & {
		--#{$prefix}menu-background: var(--#{$prefix}submenu-background);
	}
}

// ── Jerarquía de submenu ─────────────────────────────────────────────────────
// El trigger (padre expandible) usa us-collapse-trigger — clase inyectada por
// CollapseTrigger.tsx. Especificidad 0,2,0 → gana sobre .us-menu-item (0,1,0).
.#{$prefix}menu-item.#{$prefix}collapse-trigger {
	font-weight: var(--#{$prefix}menu-submenu-trigger-font-weight, var(--#{$prefix}menu-item-font-weight));
}

// Items hijos dentro de un submenu abierto. Especificidad 0,3,0.
.#{$prefix}menu-submenu .#{$prefix}menu .#{$prefix}menu-item {
	font-weight: var(--#{$prefix}menu-child-item-font-weight, var(--#{$prefix}menu-item-font-weight));
	color: var(--#{$prefix}menu-child-item-color, var(--#{$prefix}menu-item-color));
}

// Línea conectora lateral — opt-in por tema (desactivada por defecto).
.#{$prefix}menu-submenu > .#{$prefix}collapse {
	border-left: var(--#{$prefix}menu-submenu-connector-width, 0px) solid var(--#{$prefix}menu-submenu-connector-color, transparent);
	margin-left: var(--#{$prefix}menu-submenu-connector-margin, 0px);
}