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

$_sizes: (
	xs:  (hpy: 4px,  hpx: 8px,  h-min: 24px, h-gap: 6px,  h-cgap: 4px,  title-fs: 10px, title-lh: 14px, sub-fs: 9px,  sub-lh: 12px, bpy: 8px,  bpx: 8px,  bfs: 10px, blh: 14px, fpy: 4px,  fpx: 8px,  f-min: 24px, f-gap: 6px,  icon: 14px),
	sm:  (hpy: 5px,  hpx: 10px, h-min: 28px, h-gap: 8px,  h-cgap: 4px,  title-fs: 11px, title-lh: 16px, sub-fs: 10px, sub-lh: 14px, bpy: 12px, bpx: 10px, bfs: 11px, blh: 16px, fpy: 5px,  fpx: 10px, f-min: 28px, f-gap: 8px,  icon: 16px),
	md:  (hpy: 6px,  hpx: 12px, h-min: 32px, h-gap: 10px, h-cgap: 6px,  title-fs: 12px, title-lh: 18px, sub-fs: 11px, sub-lh: 16px, bpy: 16px, bpx: 12px, bfs: 12px, blh: 18px, fpy: 6px,  fpx: 12px, f-min: 32px, f-gap: 10px, icon: 18px),
	lg:  (hpy: 7px,  hpx: 14px, h-min: 36px, h-gap: 12px, h-cgap: 6px,  title-fs: 14px, title-lh: 20px, sub-fs: 12px, sub-lh: 18px, bpy: 18px, bpx: 14px, bfs: 14px, blh: 20px, fpy: 7px,  fpx: 14px, f-min: 36px, f-gap: 12px, icon: 20px),
	xl:  (hpy: 8px,  hpx: 16px, h-min: 40px, h-gap: 16px, h-cgap: 8px,  title-fs: 16px, title-lh: 24px, sub-fs: 14px, sub-lh: 18px, bpy: 20px, bpx: 16px, bfs: 16px, blh: 24px, fpy: 8px,  fpx: 16px, f-min: 40px, f-gap: 16px, icon: 24px),
	2xl: (hpy: 10px, hpx: 18px, h-min: 44px, h-gap: 20px, h-cgap: 10px, title-fs: 18px, title-lh: 28px, sub-fs: 16px, sub-lh: 22px, bpy: 24px, bpx: 18px, bfs: 18px, blh: 28px, fpy: 10px, fpx: 18px, f-min: 44px, f-gap: 20px, icon: 28px),
);

.#{$prefix}theme-centurion {
	.#{$prefix}card {
		--#{$prefix}card-background: var(--#{$prefix}white-color);
		--#{$prefix}card-border-width: 1px;
		--#{$prefix}card-border-style: solid;
		--#{$prefix}card-border-color: var(--#{$prefix}border-color);
		--#{$prefix}card-border-radius: 0px;
		--#{$prefix}card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
			rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

		--#{$prefix}card-title-font-weight: 700;
		--#{$prefix}card-subtitle-font-weight: 400;

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

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

		--#{$prefix}card-body-color: var(--#{$prefix}body-color);
		--#{$prefix}card-details-background: rgba(0, 0, 0, 0.025);

		& > .#{$prefix}surface {
			--#{$prefix}surface-color: var(--#{$prefix}white-color);
			--#{$prefix}surface-opacity: 1;
		}

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

		&--selected {
			--#{$prefix}card-color: var(--#{$prefix}primary-color);

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}overlay-opacity: 0.08;
				--#{$prefix}_hover-overlay-opacity: 0.12;
				--#{$prefix}_active-overlay-opacity: 0.16;
			}
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}card--#{$size} {
			--#{$prefix}card-header-padding-y: #{map.get($t, hpy)};
			--#{$prefix}card-header-padding-x: #{map.get($t, hpx)};
			--#{$prefix}card-header-min-height: #{map.get($t, h-min)};
			--#{$prefix}card-header-gap: #{map.get($t, h-gap)};
			--#{$prefix}card-header-content-gap: #{map.get($t, h-cgap)};
			--#{$prefix}card-header-title-font-size: #{map.get($t, title-fs)};
			--#{$prefix}card-header-title-line-height: #{map.get($t, title-lh)};
			--#{$prefix}card-header-subtitle-font-size: #{map.get($t, sub-fs)};
			--#{$prefix}card-header-subtitle-line-height: #{map.get($t, sub-lh)};
			--#{$prefix}card-body-padding-y: #{map.get($t, bpy)};
			--#{$prefix}card-body-padding-x: #{map.get($t, bpx)};
			--#{$prefix}card-body-font-size: #{map.get($t, bfs)};
			--#{$prefix}card-body-line-height: #{map.get($t, blh)};
			--#{$prefix}card-footer-padding-y: #{map.get($t, fpy)};
			--#{$prefix}card-footer-padding-x: #{map.get($t, fpx)};
			--#{$prefix}card-footer-min-height: #{map.get($t, f-min)};
			--#{$prefix}card-footer-gap: #{map.get($t, f-gap)};
		}

		.#{$prefix}card--#{$size} .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
			--#{$prefix}icon-font-size-default: #{map.get($t, icon)};
		}
	}
}