@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-centurion {
	.#{$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: linear-gradient(to bottom, #cad8e9ff 0%, white 50%, white 100%);

		&--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: transparent;
			--#{$prefix}modal-header-background: #f3f3f3;

			--#{$prefix}modal-header-title-font-weight: 400;
			--#{$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;
		}

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

		&-footer {
			--#{$prefix}modal-footer-border-width: 1px;
			--#{$prefix}modal-footer-border-color: #777776;
			--#{$prefix}modal-footer-background: linear-gradient(#f0f0ee 0%, #b2b2b1 100%);
		}
	}

	.#{$prefix}modal-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
		--#{$prefix}icon-font-size-default: 18px;
	}

	@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)};
			}
		}
	}
}