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

$_sizes: (
	xs:  (gap: 4px,  cw: 20px, ch: 14px, tw: 8px,  th: 8px,  label-fs: 10px),
	sm:  (gap: 4px,  cw: 24px, ch: 16px, tw: 10px, th: 10px, label-fs: 11px),
	md:  (gap: 6px,  cw: 28px, ch: 18px, tw: 12px, th: 12px, label-fs: 12px),
	lg:  (gap: 8px,  cw: 32px, ch: 20px, tw: 14px, th: 14px, label-fs: 14px),
	xl:  (gap: 8px,  cw: 36px, ch: 22px, tw: 14px, th: 14px, label-fs: 16px),
	2xl: (gap: 10px, cw: 42px, ch: 24px, tw: 16px, th: 16px, label-fs: 18px),
);

.#{$prefix}theme-fci {
	.#{$prefix}switch {
		--#{$prefix}switch-control-color: rgba(0, 0, 0, 0.2);
		--#{$prefix}_checked-switch-control-color: var(--#{$prefix}primary-color);
		--#{$prefix}_focus-switch-control-box-shadow: 0px 4px 8px rgba(var(--#{$prefix}primary-rgb) / 40%);

		--#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);
		--#{$prefix}switch-thumb-border-radius: 50%;

		--#{$prefix}switch-control-border-radius: 10px;

		&--light {
			--#{$prefix}switch-control-color: rgba(0, 0, 0, 0.2);
			--#{$prefix}_checked-switch-control-color: rgba(0, 0, 0, 0.8);
			--#{$prefix}_focus-switch-control-box-shadow: 0px 4px 8px rgba(0 0 0 / 15%);

			--#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);

			--#{$prefix}switch-label-color: var(--#{$prefix}black-color);
		}

		&--dark {
			--#{$prefix}switch-control-color: rgba(0, 0, 0, 0.4);
			--#{$prefix}_checked-switch-control-color: rgba(255 255 255 / 30%);
			--#{$prefix}_focus-switch-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 15%);

			--#{$prefix}switch-thumb-color: var(--#{$prefix}white-color);

			--#{$prefix}switch-label-color: var(--#{$prefix}white-color);
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}switch--#{$size} {
			--#{$prefix}switch-gap: #{map.get($t, gap)};
			--#{$prefix}switch-control-width: #{map.get($t, cw)};
			--#{$prefix}switch-control-height: #{map.get($t, ch)};
			--#{$prefix}switch-thumb-width: #{map.get($t, tw)};
			--#{$prefix}switch-thumb-height: #{map.get($t, th)};
			--#{$prefix}switch-label-font-size: #{map.get($t, label-fs)};
		}
	}
}