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

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

.#{$prefix}theme-fci {
	.#{$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: 600;
		--#{$prefix}chip-border-radius: 4px;
		--#{$prefix}overlay-transition: background-color 200ms ease, opacity 200ms ease;
		--#{$prefix}outline-transition: all 200ms ease;
	}

	@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}chip-border-radius: #{map.get($t, radius)};

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