@use '../variables' as *;

.#{$prefix}chip {
	position: relative;
	height: var(--#{$prefix}chip-height);
	padding-block: var(--#{$prefix}chip-padding-y);
	padding-inline: var(--#{$prefix}chip-padding-x);
	font-size: var(--#{$prefix}chip-font-size);
	font-weight: var(--#{$prefix}chip-font-weight);
	font-style: var(--#{$prefix}chip-font-style);
	font-family: var(--#{$prefix}chip-font-family);
	white-space: nowrap;
	border-radius: var(--#{$prefix}chip-border-radius);
	z-index: 0;
	color: var(--#{$prefix}chip-color);
	background-color: var(--#{$prefix}chip-background);
	display: inline-flex;
	align-items: center;
	gap: var(--#{$prefix}chip-gap);

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

	&--closable {
		padding-inline-end: calc(var(--#{$prefix}chip-padding-x) / 2);
	}

	&__closable {
		position: relative;
		padding: 0.125rem;
		color: currentColor;
		border-radius: 9999px;
		cursor: pointer;
		opacity: 0.8;

		&:hover {
			opacity: 1;
		}
		&::after {
			position: absolute;
			content: '';
			inset: 0px;
			border-radius: inherit;
			background-color: currentColor;
			opacity: 0.2;
		}
	}

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

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

// ── Variantes ────────────────────────────────────────────────────────────────

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

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

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

.#{$prefix}chip--bordered {
	& > .#{$prefix}outline {
		--#{$prefix}outline-border-color: currentColor;
	}
}

.#{$prefix}chip--flat {
	& > .#{$prefix}overlay {
		--#{$prefix}overlay-opacity: 0.16;
	}

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

.#{$prefix}chip--text {
	& > .#{$prefix}outline {
		--#{$prefix}outline-border-color: transparent;
	}
}

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

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

@each $color in $_chip-colors {
	.#{$prefix}chip--filled.#{$prefix}chip--#{$color} {
		--#{$prefix}chip-background: var(--#{$prefix}#{$color}-color);
	}

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

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

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

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

	@if $color == 'warning' {
		.#{$prefix}chip--filled.#{$prefix}chip--#{$color} {
			--#{$prefix}chip-color: var(--#{$prefix}warning-on-color);
		}
	}

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

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

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

		.#{$prefix}chip--text.#{$prefix}chip--#{$color} {
			--#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
		}
	}
}