@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(result) {
	@include set-component-css-var('result', $result);
}

@include b(result) {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	box-sizing: border-box;
	padding: getCssVar('result-padding');

	@include e(icon) {
		@include when(animation) {
			animation-name: #{$namespace}-icon-animation;
			animation-delay: 0s;
			animation-direction: normal;
			animation-duration: 1s;
			animation-iteration-count: 5;
			animation-timing-function: linear;
		}

		svg {
			width: getCssVar('result-icon-font-size');
			height: getCssVar('result-icon-font-size');
		}

		@include when(status) {
			svg {
				height: auto;
				width: auto;
			}
		}
	}

	@include e(title) {
		margin-top: getCssVar('result-title-margin-top');

		p {
			margin: 0;
			font-size: getCssVar('result-title-font-size');
			color: getCssVar('text-color', 'primary');
			line-height: 1.3;
		}
	}

	@include e(subtitle) {
		margin-top: getCssVar('result-subtitle-margin-top');

		p {
			margin: 0;
			font-size: getCssVar('font-size', 'base');
			color: getCssVar('text-color', 'regular');
			line-height: 1.3;
		}
	}

	@include e(extra) {
		margin-top: getCssVar('result-extra-margin-top');
	}

	@each $type in $types {
		.icon-#{$type} {
			@include css-var-from-global(('result', 'color'), ('color', $type));

			color: getCssVar('result-color');
		}
	}
}

@keyframes #{$namespace}-icon-animation {
	0% {
		transform: rotate(-15deg);
	}

	4% {
		transform: rotate(15deg);
	}

	8%,
	24% {
		transform: rotate(-18deg);
	}

	12%,
	28% {
		transform: rotate(18deg);
	}

	16% {
		transform: rotate(-22deg);
	}

	20% {
		transform: rotate(22deg);
	}

	32% {
		transform: rotate(-12deg);
	}

	36% {
		transform: rotate(12deg);
	}

	40%,
	100% {
		transform: rotate(0deg);
	}
}