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

$_sizes: (
	xs:  (gap: 4px,  g-gap: 4px,  w: 10px, h: 10px, radius: 2px, label-fs: 10px, icon: 6px),
	sm:  (gap: 4px,  g-gap: 6px,  w: 12px, h: 12px, radius: 2px, label-fs: 11px, icon: 8px),
	md:  (gap: 6px,  g-gap: 8px,  w: 14px, h: 14px, radius: 2px, label-fs: 12px, icon: 10px),
	lg:  (gap: 8px,  g-gap: 10px, w: 16px, h: 16px, radius: 2px, label-fs: 14px, icon: 10px),
	xl:  (gap: 8px,  g-gap: 12px, w: 18px, h: 18px, radius: 2px, label-fs: 16px, icon: 12px),
	2xl: (gap: 10px, g-gap: 14px, w: 20px, h: 20px, radius: 2px, label-fs: 18px, icon: 14px),
);

.#{$prefix}theme-fci {
	.#{$prefix}checkbox {
		--#{$prefix}checkbox-gap: 6px;
		--#{$prefix}checkbox-control-width: 14px;
		--#{$prefix}checkbox-control-height: 14px;
		--#{$prefix}checkbox-label-font-size: 12px;

		--#{$prefix}checkbox-control-border-width: 1px;
		--#{$prefix}checkbox-control-border-style: solid;
		--#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.4);
		--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);

		--#{$prefix}_checked-checkbox-control-border-color: var(--#{$prefix}primary-color);
		--#{$prefix}_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--#{$prefix}primary-rgb) / 40%);

		--#{$prefix}checkbox-tap-background: var(--#{$prefix}primary-color);

		& .#{$prefix}icon {
			--#{$prefix}icon-color: inherit !important;
		}

		&--light {
			--#{$prefix}checkbox-control-border-color: rgba(0, 0, 0, 0.2);
			--#{$prefix}checkbox-tap-background: rgba(0, 0, 0, 0.8);
			--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
			--#{$prefix}_checked-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
			--#{$prefix}_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);
			--#{$prefix}checkbox-label-color: var(--#{$prefix}black-color);
		}

		&--dark {
			--#{$prefix}checkbox-control-border-color: rgba(255 255 255 / 30%);
			--#{$prefix}checkbox-tap-background: rgba(255 255 255 / 30%);
			--#{$prefix}checkbox-control-color: var(--#{$prefix}white-color);
			--#{$prefix}_checked-checkbox-control-border-color: rgba(255 255 255 / 30%);
			--#{$prefix}_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);
			--#{$prefix}checkbox-label-color: var(--#{$prefix}white-color);
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}checkbox-group--#{$size} {
			--#{$prefix}checkbox-group-gap: #{map.get($t, g-gap)};
		}

		.#{$prefix}checkbox--#{$size} {
			--#{$prefix}checkbox-gap: #{map.get($t, gap)};
			--#{$prefix}checkbox-control-border-radius: #{map.get($t, radius)};
			--#{$prefix}checkbox-control-width: #{map.get($t, w)};
			--#{$prefix}checkbox-control-height: #{map.get($t, h)};
			--#{$prefix}checkbox-label-font-size: #{map.get($t, label-fs)};

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