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

$_sizes: (
	xs:  (gap: 2px,  min-height: 24px, py: 4px,  px: 8px,  level: 12px, h-gap: 6px,  c-gap: 4px,  title-fs: 10px, title-lh: 14px, sub-fs: 9px,  sub-lh: 12px, body-py: 8px,  body-px: 8px,  body-fs: 10px, body-lh: 14px, icon: 14px),
	sm:  (gap: 4px,  min-height: 28px, py: 5px,  px: 10px, level: 16px, h-gap: 8px,  c-gap: 4px,  title-fs: 11px, title-lh: 16px, sub-fs: 10px, sub-lh: 14px, body-py: 12px, body-px: 10px, body-fs: 11px, body-lh: 16px, icon: 16px),
	md:  (gap: 6px,  min-height: 32px, py: 6px,  px: 12px, level: 20px, h-gap: 10px, c-gap: 6px,  title-fs: 12px, title-lh: 18px, sub-fs: 11px, sub-lh: 16px, body-py: 16px, body-px: 12px, body-fs: 12px, body-lh: 18px, icon: 18px),
	lg:  (gap: 8px,  min-height: 36px, py: 7px,  px: 14px, level: 20px, h-gap: 12px, c-gap: 6px,  title-fs: 14px, title-lh: 20px, sub-fs: 12px, sub-lh: 18px, body-py: 18px, body-px: 14px, body-fs: 14px, body-lh: 20px, icon: 20px),
	xl:  (gap: 12px, min-height: 40px, py: 8px,  px: 16px, level: 20px, h-gap: 16px, c-gap: 8px,  title-fs: 16px, title-lh: 24px, sub-fs: 14px, sub-lh: 18px, body-py: 20px, body-px: 16px, body-fs: 16px, body-lh: 24px, icon: 24px),
	2xl: (gap: 16px, min-height: 44px, py: 10px, px: 18px, level: 24px, h-gap: 20px, c-gap: 10px, title-fs: 18px, title-lh: 28px, sub-fs: 16px, sub-lh: 22px, body-py: 24px, body-px: 18px, body-fs: 18px, body-lh: 28px, icon: 28px),
);

$_colors: (primary, secondary, success, info, warning, danger);

.#{$prefix}theme-centurion {
	.#{$prefix}accordion {
		--#{$prefix}accordion-border-color: #e2e8f0;
		--#{$prefix}accordion-item-border: 1px solid var(--#{$prefix}accordion-border-color);
		--#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
		--#{$prefix}accordion-header-title-font-weight: 600;
		--#{$prefix}accordion-header-subtitle-font-weight: 400;
		--#{$prefix}accordion-header-color: var(--#{$prefix}title-color);
		--#{$prefix}accordion-body-color: inherit;
		--#{$prefix}accordion-background: var(--#{$prefix}white-color);

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 0px;
			--#{$prefix}outline-z-index: 1;
			--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
		}
	}

	.#{$prefix}accordion--bordered:not(.#{$prefix}accordion--splitted) {
		--#{$prefix}accordion-border-radius: 0px;

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 1px;
		}
	}

	.#{$prefix}accordion--bordered.#{$prefix}accordion--splitted .#{$prefix}accordion-item {
		--#{$prefix}accordion-border-radius: 0px;
		--#{$prefix}accordion-item-border: none;

		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 1px;
		}
	}

	@each $size, $t in $_sizes {
		.#{$prefix}accordion--#{$size} {
			--#{$prefix}accordion-splitted-gap: #{map.get($t, gap)};
			--#{$prefix}accordion-header-min-height: #{map.get($t, min-height)};
			--#{$prefix}accordion-header-padding-y: #{map.get($t, py)};
			--#{$prefix}accordion-header-padding-x: #{map.get($t, px)};
			--#{$prefix}accordion-header-padding-level: #{map.get($t, level)};
			--#{$prefix}accordion-header-gap: #{map.get($t, h-gap)};
			--#{$prefix}accordion-header-content-gap: #{map.get($t, c-gap)};
			--#{$prefix}accordion-header-title-font-size: #{map.get($t, title-fs)};
			--#{$prefix}accordion-header-title-line-height: #{map.get($t, title-lh)};
			--#{$prefix}accordion-header-subtitle-font-size: #{map.get($t, sub-fs)};
			--#{$prefix}accordion-header-subtitle-line-height: #{map.get($t, sub-lh)};
			--#{$prefix}accordion-body-padding-y: #{map.get($t, body-py)};
			--#{$prefix}accordion-body-padding-x: #{map.get($t, body-px)};
			--#{$prefix}accordion-body-font-size: #{map.get($t, body-fs)};
			--#{$prefix}accordion-body-line-height: #{map.get($t, body-lh)};
		}

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

	.#{$prefix}accordion-item {
		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 0px;
			--#{$prefix}outline-z-index: 1;
			--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
		}
	}

	.#{$prefix}accordion-header {
		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 0px;
		}
	}

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

	@each $color in $_colors {
		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} {
			--#{$prefix}accordion-header-color: var(--#{$prefix}title-color);
		}

		.#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
			& > .#{$prefix}surface {
				--#{$prefix}surface-opacity: 0;
			}

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

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-color: var(--#{$prefix}accordion-border-color);
				--#{$prefix}outline-opacity: 1;
			}
		}
	}

	@each $color in $_colors {
		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} {
			--#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
			--#{$prefix}accordion-item-border: 1px solid var(--#{$prefix}accordion-border-color);
			--#{$prefix}accordion-header-border-color: rgba(255, 255, 255, 0.24);
		}

		.#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
				--#{$prefix}surface-opacity: 1;
			}

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}white-color);
				--#{$prefix}overlay-opacity: 0;
				--#{$prefix}_hover-overlay-opacity: 0.16;
				--#{$prefix}_active-overlay-opacity: 0.24;
			}

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-color: rgba(255, 255, 255, 0.24);
				--#{$prefix}outline-opacity: 1;
			}
		}
	}

	@each $color in $_colors {
		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} {
			--#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-dark-color);
		}

		.#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
				--#{$prefix}surface-opacity: 0.12;
			}

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

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-color: var(--#{$prefix}#{$color}-color);
				--#{$prefix}outline-opacity: 0.32;
			}
		}
	}

	@each $color in $_colors {
		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} {
			--#{$prefix}accordion-header-color: var(--#{$prefix}black-color);
			--#{$prefix}accordion-item-border: 1px solid var(--#{$prefix}accordion-border-color);
			--#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
		}

		.#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
			& > .#{$prefix}surface {
				--#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
				--#{$prefix}surface-opacity: 0.16;
			}

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

			& > .#{$prefix}outline {
				--#{$prefix}outline-border-color: var(--#{$prefix}#{$color}-color);
				--#{$prefix}outline-opacity: 0.24;
			}
		}
	}

	.#{$prefix}accordion-item .#{$prefix}accordion-header--bordered {
		& > .#{$prefix}outline {
			--#{$prefix}outline-border-width: 1px;
		}
	}
}