@use 'sass:map';
@use '../../../variables' as *;

$_sizes: (
	xs:  (height: 16px, px: 8px,  fs: 10px, fw: 500, gap: 6px,  icon: 10px),
	sm:  (height: 20px, px: 8px,  fs: 11px, fw: 500, gap: 6px,  icon: 12px),
	md:  (height: 24px, px: 12px, fs: 12px, fw: 500, gap: 8px,  icon: 16px),
	lg:  (height: 28px, px: 16px, fs: 14px, fw: 500, gap: 10px, icon: 18px),
	xl:  (height: 32px, px: 16px, fs: 16px, fw: 500, gap: 12px, icon: 20px),
	2xl: (height: 36px, px: 16px, fs: 18px, fw: 500, gap: 14px, icon: 24px),
);

.#{$prefix}theme-centurion {
	.#{$prefix}menu {
		--#{$prefix}menu-padding-y: 0;
		--#{$prefix}menu-padding-x: 0;
		--#{$prefix}menu-color: #343a40;
		--#{$prefix}menu-background: transparent;
	}

	.#{$prefix}menu-item {
		--#{$prefix}menu-item-height: 24px;
		--#{$prefix}menu-item-padding-y: 0;
		--#{$prefix}menu-item-padding-x: 12px;
		--#{$prefix}menu-item-padding-level: 12px;
		--#{$prefix}menu-item-font-size: 12px;
		--#{$prefix}menu-item-font-weight: 500;
		--#{$prefix}menu-item-border-radius: 0;
		--#{$prefix}menu-item-gap: 8px;

		// ── Indicador de selección izquierdo ─────────────────────────────────
		--#{$prefix}menu-item-indicator-width: 3px;
		--#{$prefix}menu-item-indicator-color: var(--#{$prefix}primary-color);

		// ── Jerarquía de submenu ─────────────────────────────────────────────
		--#{$prefix}menu-submenu-trigger-font-weight: 600;
		--#{$prefix}menu-child-item-font-weight: 400;
		--#{$prefix}menu-child-item-color: #495057;

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: inherit;
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-color: inherit;
			--#{$prefix}_hover-overlay-opacity: 0.08;
		}

		.#{$prefix}icon {
			--#{$prefix}icon-font-size: 16px;
			--#{$prefix}icon-color: var(--#{$prefix}primary-color);
		}

		&--selected {
			--#{$prefix}menu-item-color: var(--#{$prefix}primary-color);

			> .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}overlay-opacity: 0.08;
				--#{$prefix}_hover-overlay-opacity: 0.12;
				--#{$prefix}_active-overlay-opacity: 0.16;
			}
		}
	}

	// ── Íconos de ítems hijo → color neutro, no primary ──────────────────────
	.#{$prefix}menu-submenu .#{$prefix}menu .#{$prefix}menu-item {
		.#{$prefix}icon {
			--#{$prefix}icon-color: var(--#{$prefix}menu-child-item-color);
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}menu-item--#{$size} {
			--#{$prefix}menu-item-height: #{map.get($t, height)};
			--#{$prefix}menu-item-padding-x: #{map.get($t, px)};
			--#{$prefix}menu-item-font-size: #{map.get($t, fs)};
			--#{$prefix}menu-item-font-weight: #{map.get($t, fw)};
			--#{$prefix}menu-item-gap: #{map.get($t, gap)};

			.#{$prefix}icon {
				--#{$prefix}icon-font-size: #{map.get($t, icon)};
			}
		}
	}

	.#{$prefix}menu-group {
		--#{$prefix}menu-group-height: 24px;
		--#{$prefix}menu-group-padding-y: 0;
		--#{$prefix}menu-group-padding-x: 12px;
		--#{$prefix}menu-group-padding-level: 14px;
		--#{$prefix}menu-group-font-size: 12px;
		--#{$prefix}menu-group-font-weight: 700;
		--#{$prefix}menu-group-border-radius: 0;
		--#{$prefix}menu-group-gap: 8px;
		--#{$prefix}menu-group-border-width: 1px;
		--#{$prefix}menu-group-border-color: #dee2e6;
	}

	.#{$prefix}menu-submenu > .#{$prefix}menu-item--selected {
		& > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-opacity: 0;
			--#{$prefix}_active-overlay-opacity: 0;
		}
	}
}