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

$_sizes: (
	xs:  (height: 16px, px: 8px,  fs: 10px, gap: 2px, icon: 10px),
	sm:  (height: 20px, px: 10px, fs: 11px, gap: 2px, icon: 12px),
	md:  (height: 24px, px: 12px, fs: 12px, gap: 4px, icon: 16px),
	lg:  (height: 28px, px: 14px, fs: 14px, gap: 4px, icon: 18px),
	xl:  (height: 32px, px: 16px, fs: 16px, gap: 6px, icon: 20px),
	2xl: (height: 36px, px: 18px, fs: 18px, gap: 8px, icon: 24px),
);

.#{$prefix}theme-centurion {
	.#{$prefix}chip {
		--#{$prefix}chip-height: 24px;
		--#{$prefix}chip-padding-y: 0;
		--#{$prefix}chip-padding-x: 12px;
		--#{$prefix}chip-font-size: 12px;
		--#{$prefix}chip-gap: 4px;
		--#{$prefix}chip-font-weight: 500;
		--#{$prefix}chip-border-radius: 0px;
	}

	// ── Filled: borde oscuro sutil (sin degradado) ────────────────────────────────
	.#{$prefix}chip--filled {
		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: var(--#{$prefix}gloss-filled-outline-color);
			--#{$prefix}outline-opacity: 1;
		}
	}

	// filled--secondary: borde sutil a currentColor (igual que flat/bordered)
	.#{$prefix}chip--filled.#{$prefix}chip--secondary {
		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: currentColor;
			--#{$prefix}outline-opacity: var(--#{$prefix}gloss-flat-outline-opacity);
		}
	}

	// ── Flat / Bordered: borde a currentColor ────────────────────────────────────
	.#{$prefix}chip--flat,
	.#{$prefix}chip--bordered {
		& > .#{$prefix}outline {
			--#{$prefix}outline-border-color: currentColor;
			--#{$prefix}outline-opacity: var(--#{$prefix}gloss-flat-outline-opacity);
		}
	}

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

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