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

// Heights: Azure Portal (md=24px es el botón estándar del portal)
// Padding, font-size, gap: escala proporcional de Fluent UI v9
//   Fluent small(24px)→px 8px/fs 12px/gap 4px  |  medium(32px)→px 12px/fs 14px/gap 6px
$_sizes: (
	xs: (
		height: 16px,
		px: 0.375rem,
		fs: 0.6875rem,
		radius: 2px,
		gap: 0.25rem,
		icon: 0.625rem,
		icon-only: 0.75rem,
	),
	sm: (
		height: 20px,
		px: 0.5rem,
		fs: 0.75rem,
		radius: 2px,
		gap: 0.25rem,
		icon: 0.6875rem,
		icon-only: 0.875rem,
	),
	md: (
		height: 24px,
		px: 0.5rem,
		fs: 0.75rem,
		radius: 4px,
		gap: 0.25rem,
		icon: 0.75rem,
		icon-only: 1rem,
	),
	lg: (
		height: 28px,
		px: 0.625rem,
		fs: 0.8125rem,
		radius: 4px,
		gap: 0.25rem,
		icon: 0.875rem,
		icon-only: 1.125rem,
	),
	xl: (
		height: 32px,
		px: 0.75rem,
		fs: 0.875rem,
		radius: 4px,
		gap: 0.375rem,
		icon: 1rem,
		icon-only: 1.25rem,
	),
	2xl: (
		height: 36px,
		px: 0.875rem,
		fs: 1rem,
		radius: 4px,
		gap: 0.375rem,
		icon: 1.125rem,
		icon-only: 1.375rem,
	),
);

.#{$prefix}theme-fci {
	// Tokens raíz del tema — ajustar aquí para cambiar el look completo del botón
	.#{$prefix}button {
		--#{$prefix}button-font-weight: 600;
		--#{$prefix}button-font-family: var(--#{$prefix}font-sans);
		--#{$prefix}button-icon-only-border-radius: 9999px;
		--#{$prefix}button-padding-y: 0;
		--#{$prefix}button-divider-width: 1px;
		--#{$prefix}button-divider-color: #fff;

		// ── Parity visual Fluent UI v9 ────────────────────────────────────────────
		--#{$prefix}button-disabled-opacity: 0.4;
		--#{$prefix}overlay-transition: background-color 200ms ease, opacity 200ms ease;
		--#{$prefix}outline-transition: all 200ms ease;
		--#{$prefix}button-focus-ring-width: 1px;
		--#{$prefix}button-focus-ring-color: currentColor;
		--#{$prefix}button-focus-ring-offset: 2px;
	}

	// ── Filled secondary: texto near-black sobre fondo tonal ────────────────────
	// El base deja --button-color: secondary-color (gris). Se sobreescribe con
	// secondary-dark-color para legibilidad sobre el fondo transparente + overlay.
	.#{$prefix}button--filled.#{$prefix}button--secondary {
		--#{$prefix}button-color: var(--#{$prefix}secondary-dark-color);
	}

	// ── Filled: hover oscurece (overlay negro) ───────────────────────────────────
	// Fluent UI v9 darkens the brand color on hover. Excluye secondary (ghost/tonal).
	.#{$prefix}button--filled:not(.#{$prefix}button--secondary) {
		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: #000;
		}
	}

	// ── Glow desactivado ─────────────────────────────────────────────────────────
	// Fluent UI v9 no usa glow en hover/active/focus — el feedback viene del overlay.
	.#{$prefix}button > .#{$prefix}glow {
		--#{$prefix}glow-opacity: 0;
	}

	// ── Focus ring estilo Fluent UI v9 ───────────────────────────────────────────
	// Anillo sólido con offset (outline-offset), no glow difuso.
	// Vars expuestas para override en futuros temas.
	.#{$prefix}button:focus-visible,
	.#{$prefix}button[class*='--focus'] {
		outline: var(--#{$prefix}button-focus-ring-width) solid var(--#{$prefix}button-focus-ring-color);
		outline-offset: var(--#{$prefix}button-focus-ring-offset);
	}

	// ── Escala de tamaños ────────────────────────────────────────────────────────
	@each $size, $t in $_sizes {
		.#{$prefix}button--#{$size} {
			--#{$prefix}button-height: #{map.get($t, height)};
			--#{$prefix}button-padding-x: #{map.get($t, px)};
			--#{$prefix}button-font-size: #{map.get($t, fs)};
			--#{$prefix}button-border-radius: #{map.get($t, radius)};
			--#{$prefix}button-gap: #{map.get($t, gap)};

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

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