@use '../variables' as *;

.#{$prefix}badge {
	&:not(&--unstyled) {
		min-width: var(--#{$prefix}badge-min-width);
		min-height: var(--#{$prefix}badge-min-height);
		padding-block: var(--#{$prefix}badge-padding-y);
		padding-inline: var(--#{$prefix}badge-padding-x);
		font-size: var(--#{$prefix}badge-font-size);
		font-weight: var(--#{$prefix}badge-font-weight);
		line-height: var(--#{$prefix}badge-line-height);
		border: var(--#{$prefix}badge-border-width) solid var(--#{$prefix}badge-border-color);
		border-radius: var(--#{$prefix}badge-border-radius);
		color: var(--#{$prefix}badge-color);
		background-color: var(--#{$prefix}badge-background);
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	&-wrapper {
		flex-shrink: 0;
		position: relative;
		display: inline-flex;
	}

	&-wrapper & {
		position: absolute;
	}

	&-wrapper &--top-left {
		top: 10%;
		left: 10%;
	}

	&-wrapper &--top-right {
		right: 0;
		top: 0;
		transform: translate(50%, -50%);
		// top: 10%;
		// right: 10%;
	}

	&-wrapper &--bottom-left {
		bottom: 10%;
		left: 10%;
	}

	&-wrapper &--bottom-right {
		bottom: 0;
		right: 0;
	}
}

// ── Colores ──────────────────────────────────────────────────────────────────
// Lógica compartida por todos los temas. Idéntica entre Centurion y FCI.

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

@each $color in $_badge-colors {
	.#{$prefix}badge--#{$color} {
		--#{$prefix}badge-background: var(--#{$prefix}#{$color}-color);
	}
}