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

$_sizes: (
	xs:  (height: 12px, px: 4px,  fs: 9px),
	sm:  (height: 14px, px: 5px,  fs: 10px),
	md:  (height: 16px, px: 6px,  fs: 10px),
	lg:  (height: 18px, px: 8px,  fs: 11px),
	xl:  (height: 20px, px: 10px, fs: 12px),
	2xl: (height: 24px, px: 12px, fs: 14px),
);

.#{$prefix}theme-fci {
	.#{$prefix}badge {
		--#{$prefix}badge-min-height: 16px;
		--#{$prefix}badge-min-width: 16px;
		--#{$prefix}badge-padding-y: 0;
		--#{$prefix}badge-padding-x: 6px;
		--#{$prefix}badge-font-size: 10px;
		--#{$prefix}badge-font-weight: 400;
		--#{$prefix}badge-line-height: 1;
		--#{$prefix}badge-border-radius: 10px;
		--#{$prefix}badge-color: var(--#{$prefix}white-color);

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

		&--dot {
			--#{$prefix}badge-border-radius: 50%;
			--#{$prefix}badge-padding-x: 0;
		}

		&--secondary {
			--#{$prefix}badge-color: var(--#{$prefix}secondary-color);
			--#{$prefix}badge-background: var(--#{$prefix}white-color);

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

	@each $size, $t in $_sizes {
		.#{$prefix}badge--#{$size} {
			--#{$prefix}badge-min-height: #{map.get($t, height)};
			--#{$prefix}badge-min-width: #{map.get($t, height)};
			--#{$prefix}badge-padding-x: #{map.get($t, px)};
			--#{$prefix}badge-font-size: #{map.get($t, fs)};

			&.#{$prefix}badge--dot {
				--#{$prefix}badge-padding-x: 0;
			}
		}
	}
}