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

$_sizes: (
	xs:  (height: 16px, px: 0.5rem,   fs: 10px,   radius: 0px, gap: 0.125rem, icon: 10px,     icon-only: 0.75rem),
	sm:  (height: 20px, px: 0.625rem, fs: 11px,   radius: 0px, gap: 0.125rem, icon: 12px,     icon-only: 0.875rem),
	md:  (height: 24px, px: 0.75rem,  fs: 12px,   radius: 0px, gap: 0.25rem,  icon: 1rem,     icon-only: 1rem),
	lg:  (height: 28px, px: 0.875rem, fs: 14px,   radius: 0px, gap: 0.25rem,  icon: 1.125rem, icon-only: 1.125rem),
	xl:  (height: 32px, px: 1rem,     fs: 16px,   radius: 0px, gap: 0.375rem, icon: 1.25rem,  icon-only: 1.5rem),
	2xl: (height: 36px, px: 1.125rem, fs: 18px,   radius: 0px, gap: 0.5rem,   icon: 1.5rem,   icon-only: 1.75rem),
);

.#{$prefix}theme-centurion {
	// ── Tokens de gloss Centurion — disponibles para todos los componentes ───────
	// Promovidos al nivel del tema para que chips, chips y futuros componentes
	// puedan heredarlos sin duplicar valores.
	//
	// filled: highlight blanco prominente en top + sombra oscura en bottom
	--#{$prefix}gloss-filled: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.42) 0%,
		rgba(255, 255, 255, 0.08) 48%,
		rgba(0, 0, 0, 0)          52%,
		rgba(0, 0, 0, 0.12)       100%
	);
	// surface: chrome/silver para flat y bordered
	--#{$prefix}gloss-surface: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.58) 0%,
		rgba(255, 255, 255, 0.02) 48%,
		rgba(0, 0, 0, 0.08)       100%
	);
	// hover: muy brillante para feedback visual claro
	--#{$prefix}gloss-hover: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.72) 0%,
		rgba(255, 255, 255, 0.04) 48%,
		rgba(0, 0, 0, 0.06)       100%
	);
	// pressed: gradiente invertido (oscuro arriba, claro abajo) — efecto "presionado" WPF
	--#{$prefix}gloss-pressed: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.18)       0%,
		rgba(0, 0, 0, 0.04)       48%,
		rgba(255, 255, 255, 0)    52%,
		rgba(255, 255, 255, 0.22) 100%
	);
	// outline de superficie filled: borde oscuro sutil
	--#{$prefix}gloss-filled-outline-color: rgba(0, 0, 0, 0.28);
	// opacity del outline en flat/bordered
	--#{$prefix}gloss-flat-outline-opacity: 0.24;

	.#{$prefix}button {
		--#{$prefix}button-font-weight: 500;
		--#{$prefix}button-font-family: var(--#{$prefix}font-sans);
		--#{$prefix}button-icon-only-border-radius: 0px;
		--#{$prefix}button-padding-y: 0;
		--#{$prefix}button-divider-width: 1px;
		--#{$prefix}button-divider-color: rgba(255, 255, 255, 0.4);
		--#{$prefix}button-disabled-opacity: 0.5;

		// Focus ring — anillo discreto estilo enterprise desktop
		--#{$prefix}button-focus-ring-width: 1px;
		--#{$prefix}button-focus-ring-color: currentColor;
		--#{$prefix}button-focus-ring-offset: 2px;

		// Transiciones rápidas — respuesta instantánea de desktop
		--#{$prefix}overlay-transition: background-color 100ms linear, opacity 100ms linear;
		--#{$prefix}outline-transition: all 100ms linear;

		// Alias locales — el botón referencia los tokens de gloss del tema
		--#{$prefix}button-filled-gloss: var(--#{$prefix}gloss-filled);
		--#{$prefix}button-surface-gloss: var(--#{$prefix}gloss-surface);
		--#{$prefix}button-hover-gloss: var(--#{$prefix}gloss-hover);
		--#{$prefix}button-pressed-gloss: var(--#{$prefix}gloss-pressed);
		--#{$prefix}button-filled-outline-color: var(--#{$prefix}gloss-filled-outline-color);
		--#{$prefix}button-flat-outline-opacity: var(--#{$prefix}gloss-flat-outline-opacity);
	}

	// ── Filled ───────────────────────────────────────────────────────────────────
	.#{$prefix}button--filled {
		background-image: var(--#{$prefix}button-filled-gloss);

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: var(--#{$prefix}button-filled-outline-color);
			--#{$prefix}outline-opacity: 1;
		}

		&:not(.#{$prefix}button--disabled):active {
			background-image: var(--#{$prefix}button-pressed-gloss);
		}
	}

	// filled--secondary se comporta como flat--secondary: Chrome Surface + overlay tonal.
	// El base lo deja transparente (ghost FCI). Centurion lo redirige al look flat.
	.#{$prefix}button--filled.#{$prefix}button--secondary {
		--#{$prefix}button-color: var(--#{$prefix}secondary-dark-color);
		--#{$prefix}button-background: transparent;
		background-image: var(--#{$prefix}button-surface-gloss);

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: var(--#{$prefix}secondary-color);
			--#{$prefix}overlay-opacity: 0.16;
			--#{$prefix}_hover-overlay-opacity: 0.24;
			--#{$prefix}_active-overlay-opacity: 0.32;
			--#{$prefix}_focus-hover-overlay-opacity: 0.24;
			--#{$prefix}_focus-active-overlay-opacity: 0.32;
		}

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: currentColor;
			--#{$prefix}outline-opacity: var(--#{$prefix}button-flat-outline-opacity);
		}
	}

	// ── Outlined ─────────────────────────────────────────────────────────────────
	.#{$prefix}button--outlined {
		&:not(.#{$prefix}button--disabled):hover {
			background-image: var(--#{$prefix}button-hover-gloss);
		}

		&:not(.#{$prefix}button--disabled):active {
			background-image: var(--#{$prefix}button-pressed-gloss);
		}
	}

	// ── Flat ─────────────────────────────────────────────────────────────────────
	.#{$prefix}button--flat {
		background-image: var(--#{$prefix}button-surface-gloss);

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: currentColor;
			--#{$prefix}outline-opacity: var(--#{$prefix}button-flat-outline-opacity);
		}

		&:not(.#{$prefix}button--disabled):active {
			background-image: var(--#{$prefix}button-pressed-gloss);
		}
	}

	// ── Text ─────────────────────────────────────────────────────────────────────
	.#{$prefix}button--text {
		& > .#{$prefix}outline {
			--#{$prefix}outline-hover-border-color: currentColor;
			--#{$prefix}outline-hover-opacity: 0.3;
		}

		&:not(.#{$prefix}button--disabled):hover {
			background-image: var(--#{$prefix}button-hover-gloss);
		}

		&:not(.#{$prefix}button--disabled):active {
			background-image: var(--#{$prefix}button-pressed-gloss);
		}
	}

	// ── Bordered ─────────────────────────────────────────────────────────────────
	.#{$prefix}button--bordered {
		background-image: var(--#{$prefix}button-surface-gloss);

		&:not(.#{$prefix}button--disabled):active {
			background-image: var(--#{$prefix}button-pressed-gloss);
		}
	}

	// ── Glow desactivado ─────────────────────────────────────────────────────────
	// Centurion Gloss usa focus ring discreto — el glow difuso no aplica al estilo enterprise.
	.#{$prefix}button > .#{$prefix}glow {
		--#{$prefix}glow-opacity: 0;
	}

	// ── Focus ring estilo enterprise desktop ─────────────────────────────────────
	.#{$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)};
			}
		}
	}
}