@use '../variables' as *;

.#{$prefix}button {
	position: relative;
	height: var(--#{$prefix}button-height);
	padding-block: var(--#{$prefix}button-padding-y);
	padding-inline: var(--#{$prefix}button-padding-x);
	font-size: var(--#{$prefix}button-font-size);
	font-weight: var(--#{$prefix}button-font-weight);
	font-style: var(--#{$prefix}button-font-style);
	font-family: var(--#{$prefix}button-font-family);
	white-space: nowrap;
	border: none;
	outline: none;
	border-radius: var(--#{$prefix}button-border-radius);
	cursor: pointer;
	color: var(--#{$prefix}button-color);
	background-color: var(--#{$prefix}button-background);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--#{$prefix}button-gap);
	user-select: none;
	-webkit-tap-highlight-color: transparent;

	&:hover {
		text-decoration: none;
	}

	&--block {
		width: 100%;
	}

	&--disabled {
		opacity: var(--#{$prefix}button-disabled-opacity, 0.6);
		pointer-events: none;
	}

	&--icon-only {
		width: var(--#{$prefix}button-height);
		padding: 0;
		border-radius: var(--#{$prefix}button-icon-only-border-radius);
		justify-content: center;
	}

	&-group {
		border-radius: var(--#{$prefix}button-border-radius);
		position: relative;
		display: inline-flex;
		align-items: center;
	}

	&-group & {
		border-radius: 0px;
	}

	&-group--row {
		flex-direction: row;
	}

	&-group--col {
		flex-direction: column;
		align-items: stretch;
	}

	&-group--row &:first-of-type {
		border-top-left-radius: var(--#{$prefix}button-border-radius);
		border-bottom-left-radius: var(--#{$prefix}button-border-radius);
	}

	&-group--row &:last-of-type {
		border-top-right-radius: var(--#{$prefix}button-border-radius);
		border-bottom-right-radius: var(--#{$prefix}button-border-radius);
	}

	&-group--col &:first-of-type {
		border-top-left-radius: var(--#{$prefix}button-border-radius);
		border-top-right-radius: var(--#{$prefix}button-border-radius);
	}

	&-group--col &:last-of-type {
		border-bottom-left-radius: var(--#{$prefix}button-border-radius);
		border-bottom-right-radius: var(--#{$prefix}button-border-radius);
	}

	&-group--row &:not(&:first-of-type) {
		border-left: var(--#{$prefix}button-divider-width) solid var(--#{$prefix}button-divider-color);
	}

	&-group--col &:not(&:last-of-type) {
		border-bottom: var(--#{$prefix}button-divider-width) solid var(--#{$prefix}button-divider-color);
	}

	&__start-icon,
	&__end-icon {
		position: relative;
		display: flex;
		align-items: center;
	}
}

// ── Variantes ────────────────────────────────────────────────────────────────
// Lógica compartida por todos los temas. Los temas sobreescriben vía cascada.

.#{$prefix}button--filled {
	--#{$prefix}button-border-width: 1px;
	--#{$prefix}button-border-color: transparent;
	--#{$prefix}button-color: var(--#{$prefix}white-color);

	& > .#{$prefix}overlay {
		--#{$prefix}overlay-color: inherit;
		--#{$prefix}overlay-opacity: 0;
		--#{$prefix}_hover-overlay-opacity: 0.24;
		--#{$prefix}_active-overlay-opacity: 0.32;
		--#{$prefix}_focus-overlay-opacity: 0.24;
		--#{$prefix}_focus-hover-overlay-opacity: 0.24;
		--#{$prefix}_focus-active-overlay-opacity: 0.32;
	}

	& > .#{$prefix}outline {
		--#{$prefix}outline-border-width: 1px;
		--#{$prefix}outline-border-color: transparent;
	}

	.#{$prefix}chip {
		--#{$prefix}chip-background: var(--#{$prefix}white-color);
	}
}

.#{$prefix}button--outlined {
	& > .#{$prefix}overlay {
		--#{$prefix}overlay-color: inherit;
		--#{$prefix}overlay-opacity: 0;
		--#{$prefix}_hover-overlay-opacity: 0.08;
		--#{$prefix}_active-overlay-opacity: 0.1;
		--#{$prefix}_focus-overlay-opacity: 0.08;
		--#{$prefix}_focus-hover-overlay-opacity: 0.08;
		--#{$prefix}_focus-active-overlay-opacity: 0.1;
	}

	& > .#{$prefix}outline {
		--#{$prefix}outline-border-width: 1px;
		--#{$prefix}outline-border-color: currentColor;
		--#{$prefix}outline-opacity: 1;
	}
}

.#{$prefix}button--flat {
	& > .#{$prefix}overlay {
		--#{$prefix}overlay-color: inherit;
		--#{$prefix}overlay-opacity: 0.16;
		--#{$prefix}_hover-overlay-opacity: 0.24;
		--#{$prefix}_active-overlay-opacity: 0.32;
		--#{$prefix}_focus-overlay-opacity: 0.24;
		--#{$prefix}_focus-hover-overlay-opacity: 0.24;
		--#{$prefix}_focus-active-overlay-opacity: 0.32;
	}

	& > .#{$prefix}outline {
		--#{$prefix}outline-border-width: 1px;
		--#{$prefix}outline-border-color: currentColor;
		--#{$prefix}outline-opacity: 0;
	}
}

.#{$prefix}button--text {
	& > .#{$prefix}overlay {
		--#{$prefix}overlay-color: inherit;
		--#{$prefix}overlay-opacity: 0;
		--#{$prefix}_hover-overlay-opacity: 0.16;
		--#{$prefix}_active-overlay-opacity: 0.24;
		--#{$prefix}_focus-overlay-opacity: 0.12;
		--#{$prefix}_focus-hover-overlay-opacity: 0.12;
		--#{$prefix}_focus-active-overlay-opacity: 0.24;
	}

	& > .#{$prefix}outline {
		--#{$prefix}outline-border-width: 1px;
		--#{$prefix}outline-border-color: transparent;
	}
}

.#{$prefix}button--bordered {
	& > .#{$prefix}overlay {
		--#{$prefix}overlay-color: inherit;
		--#{$prefix}overlay-opacity: 0;
		--#{$prefix}_hover-overlay-opacity: 0.16;
		--#{$prefix}_active-overlay-opacity: 0.24;
		--#{$prefix}_focus-overlay-opacity: 0.12;
		--#{$prefix}_focus-hover-overlay-opacity: 0.12;
		--#{$prefix}_focus-active-overlay-opacity: 0.24;
	}

	& > .#{$prefix}outline {
		--#{$prefix}outline-border-width: 1px;
		--#{$prefix}outline-border-color: currentColor;
	}
}

// ── Glow defaults ────────────────────────────────────────────────────────────

.#{$prefix}button > .#{$prefix}glow {
	--#{$prefix}_focus-glow-spread: 1px;
	--#{$prefix}_focus-glow-blur: 6px;
	--#{$prefix}_focus-hover-glow-blur: 8px;
	--#{$prefix}_focus-active-glow-blur: 10px;
}

// ── Colores ──────────────────────────────────────────────────────────────────

$_button-colors: (primary, secondary, success, info, warning, danger);

@each $color in $_button-colors {
	.#{$prefix}button--#{$color} > .#{$prefix}glow {
		--#{$prefix}_focus-glow-color: var(--#{$prefix}#{$color}-rgb);
		--#{$prefix}_focus-glow-alpha: 1;
		--#{$prefix}_focus-glow-shadow-alpha: 0.75;
	}

	.#{$prefix}button--filled.#{$prefix}button--#{$color} {
		--#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
	}

	.#{$prefix}button--outlined.#{$prefix}button--#{$color},
	.#{$prefix}button--flat.#{$prefix}button--#{$color},
	.#{$prefix}button--text.#{$prefix}button--#{$color},
	.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
		--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
	}

	@if $color == 'secondary' {
		.#{$prefix}button--filled.#{$prefix}button--#{$color} {
			--#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
			--#{$prefix}button-background: transparent;

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: inherit;
				--#{$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}button--outlined.#{$prefix}button--#{$color},
		.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
			--#{$prefix}button-color: var(--#{$prefix}secondary-dark-color);

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-color: var(--#{$prefix}secondary-color);
			}

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}secondary-color);
			}
		}

		.#{$prefix}button--flat.#{$prefix}button--#{$color},
		.#{$prefix}button--text.#{$prefix}button--#{$color} {
			--#{$prefix}button-color: var(--#{$prefix}secondary-dark-color);

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}secondary-color);
			}
		}

		.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
			& > .#{$prefix}overlay {
				--#{$prefix}_hover-overlay-opacity: 0.08;
				--#{$prefix}_active-overlay-opacity: 0.12;
				--#{$prefix}_focus-hover-overlay-opacity: 0.08;
				--#{$prefix}_focus-active-overlay-opacity: 0.12;
			}

			& > .#{$prefix}outline {
				--#{$prefix}outline-opacity: 0.16;
			}
		}
	}

	@if $color == 'success' or $color == 'warning' {
		.#{$prefix}button--outlined.#{$prefix}button--#{$color} {
			--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
		}

		.#{$prefix}button--bordered.#{$prefix}button--#{$color} {
			--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
			}
		}
	}

	@if $color == 'primary' or $color == 'success' or $color == 'info' or $color == 'warning' or $color == 'danger' {
		.#{$prefix}button--flat.#{$prefix}button--#{$color},
		.#{$prefix}button--text.#{$prefix}button--#{$color} {
			--#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
			}
		}
	}
}

// Glow atenuado para secondary y variante outlined (sin color propio saturado)
.#{$prefix}button--secondary > .#{$prefix}glow,
.#{$prefix}button--filled.#{$prefix}button--secondary > .#{$prefix}glow,
.#{$prefix}button--outlined > .#{$prefix}glow {
	--#{$prefix}_focus-glow-color: var(--#{$prefix}secondary-rgb);
	--#{$prefix}_focus-glow-alpha: 0.5;
	--#{$prefix}_focus-glow-shadow-alpha: 0.25;
}