@use '../../../variables' as *;

.#{$prefix}theme-fci {
	.#{$prefix}result {
		&--sm {
			--#{$prefix}result-padding-y: 1rem;
			--#{$prefix}result-padding-x: 1rem;

			--#{$prefix}result-gap: 0.5rem;

			--#{$prefix}result-content-gap: 0.5rem;

			--#{$prefix}result-title-font-size: 1.25rem;
			--#{$prefix}result-title-font-weight: 500;

			--#{$prefix}result-subtitle-font-size: 0.875rem;
			--#{$prefix}result-subtitle-font-weight: 400;
		}

		&--md {
			--#{$prefix}result-padding-y: 3rem;
			--#{$prefix}result-padding-x: 3rem;

			--#{$prefix}result-gap: 1rem;

			--#{$prefix}result-content-gap: 0.5rem;

			--#{$prefix}result-title-font-size: 1.5rem;
			--#{$prefix}result-title-font-weight: 500;

			--#{$prefix}result-subtitle-font-size: 1rem;
			--#{$prefix}result-subtitle-font-weight: 400;
		}

		&--lg {
			--#{$prefix}result-padding-y: 5rem;
			--#{$prefix}result-padding-x: 5rem;

			--#{$prefix}result-gap: 1.5rem;

			--#{$prefix}result-content-gap: 0.5rem;

			--#{$prefix}result-title-font-size: 1.75rem;
			--#{$prefix}result-title-font-weight: 500;

			--#{$prefix}result-subtitle-font-size: 1rem;
			--#{$prefix}result-subtitle-font-weight: 400;
		}
	}

	.#{$prefix}result--sm {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-font-size: 4rem;
			}
		}
	}

	.#{$prefix}result--md {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-font-size: 5rem;
			}
		}
	}

	.#{$prefix}result--lg {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-font-size: 6rem;
			}
		}
	}

	.#{$prefix}result--sucess {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-color: var(--#{$prefix}success-color);
			}
		}
	}

	.#{$prefix}result--info {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-color: var(--#{$prefix}info-color);
			}
		}
	}

	.#{$prefix}result--warning {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-color: var(--#{$prefix}warning-color);
			}
		}
	}

	.#{$prefix}result--danger {
		.#{$prefix}result__icon {
			& > .#{$prefix}icon {
				--#{$prefix}icon-color: var(--#{$prefix}danger-color);
			}
		}
	}
}