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

$_sizes: (
	xs:  (h-min: 28px, h-py: 4px, h-px: 8px,  h-title-fs: 10px, h-title-lh: 14px, b-py: 8px,  b-px: 8px,  f-min: 28px, f-py: 4px, f-px: 8px),
	sm:  (h-min: 32px, h-py: 5px, h-px: 10px, h-title-fs: 11px, h-title-lh: 16px, b-py: 12px, b-px: 10px, f-min: 32px, f-py: 5px, f-px: 10px),
	md:  (h-min: 36px, h-py: 6px, h-px: 12px, h-title-fs: 12px, h-title-lh: 18px, b-py: 16px, b-px: 12px, f-min: 36px, f-py: 6px, f-px: 12px),
	lg:  (h-min: 40px, h-py: 7px, h-px: 14px, h-title-fs: 14px, h-title-lh: 20px, b-py: 20px, b-px: 14px, f-min: 40px, f-py: 7px, f-px: 14px),
	xl:  (h-min: 44px, h-py: 8px, h-px: 16px, h-title-fs: 16px, h-title-lh: 24px, b-py: 24px, b-px: 16px, f-min: 44px, f-py: 8px, f-px: 16px),
);

.#{$prefix}theme-fci {
	.#{$prefix}modal {
		--#{$prefix}modal-border-width: 1px;
		--#{$prefix}modal-border-radius: 6px;
		--#{$prefix}modal-border-color: rgba(9, 30, 66, 0.14);
		--#{$prefix}modal-background: #fff;

		&--sm { --#{$prefix}modal-width: 480px; }
		&--md { --#{$prefix}modal-width: 640px; }
		&--lg { --#{$prefix}modal-width: 720px; }
		&--xl { --#{$prefix}modal-width: 1080px; }
		&--full { --#{$prefix}modal-width: 100%; }

		&-wrapper {
			--#{$prefix}modal-wrapper-padding: 1rem;
		}

		&-header {
			--#{$prefix}modal-header-border-color: rgba(9, 30, 66, 0.14);

			--#{$prefix}modal-header-title-font-weight: 500;
			--#{$prefix}modal-header-title-color: var(--#{$prefix}title-color);

			--#{$prefix}modal-header-subtitle-font-weight: 400;
			--#{$prefix}modal-header-subtitle-color: var(--#{$prefix}subtitle-color);

			--#{$prefix}modal-header-gap: 12px;

			--#{$prefix}modal-header-min-height: 36px;
			--#{$prefix}modal-header-padding-y: 6px;
			--#{$prefix}modal-header-padding-x: 12px;
			--#{$prefix}modal-header-title-font-size: 12px;
			--#{$prefix}modal-header-title-line-height: 18px;

			--#{$prefix}modal-header-subtitle-font-size: 11px;
			--#{$prefix}modal-header-subtitle-line-height: 16px;
		}

		&-body {
			--#{$prefix}modal-body-padding-y: 16px;
			--#{$prefix}modal-body-padding-x: 12px;
		}

		&-footer {
			--#{$prefix}modal-footer-min-height: 36px;
			--#{$prefix}modal-footer-padding-y: 6px;
			--#{$prefix}modal-footer-padding-x: 12px;

			--#{$prefix}modal-footer-border-width: 1px;
			--#{$prefix}modal-footer-border-color: rgba(9, 30, 66, 0.14);
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}modal--#{$size} {
			.#{$prefix}modal-header {
				--#{$prefix}modal-header-min-height: #{map.get($t, h-min)};
				--#{$prefix}modal-header-padding-y: #{map.get($t, h-py)};
				--#{$prefix}modal-header-padding-x: #{map.get($t, h-px)};
				--#{$prefix}modal-header-title-font-size: #{map.get($t, h-title-fs)};
				--#{$prefix}modal-header-title-line-height: #{map.get($t, h-title-lh)};
			}

			.#{$prefix}modal-body {
				--#{$prefix}modal-body-padding-y: #{map.get($t, b-py)};
				--#{$prefix}modal-body-padding-x: #{map.get($t, b-px)};
			}

			.#{$prefix}modal-footer {
				--#{$prefix}modal-footer-min-height: #{map.get($t, f-min)};
				--#{$prefix}modal-footer-padding-y: #{map.get($t, f-py)};
				--#{$prefix}modal-footer-padding-x: #{map.get($t, f-px)};
			}
		}
	}
}