@import '../../../../../styles/website-colors.styles.scss';

.ai-percentage-container {
	border-radius: 10px;
	padding: 16px;
	background: $color-white;
	box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08), 0px 0px 10px 0px rgba(11, 22, 62, 0.04);
	.contet-container {
		.title {
			width: 100%;
			span {
				color: $color-black;
				font-family: 'Almarai' !important;
				font-size: 18px;
				font-weight: 800;
				line-height: 120%;
				text-transform: capitalize;
			}
			.info-icon {
				width: 18px;
				height: 18px;
				font-size: 18px;
				color: rgba(11, 22, 62, 0.6);
				cursor: pointer;
			}
		}
		.description {
			color: $color-black;
			font-family: 'haboro-soft' !important;
			font-size: 14px;
			font-weight: 500;
		}
	}
	.percentage-score-container {
		border-radius: 6px;
		border: 0.5px solid #d7c5ff;
		background: linear-gradient(140deg, #f8eaff 20.61%, $color-white 104.6%);
		box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08) inset, 0px 0px 10px 0px rgba(11, 22, 62, 0.04) inset;
		padding: 8px 10px 4px 10px;
		.percentage-result {
			color: $color-black;
			font-family: 'haboro-soft';
			font-size: 40px;
			font-style: normal;
			font-weight: 800;
			line-height: normal;
			text-transform: capitalize;
		}
	}
	.zero-result {
		border: none;
		border-radius: 6px;
		background: $color-container-background;
		.percentage-result {
			color: var(--Black-600, rgba(11, 22, 62, 0.6));
			font-family: 'haboro-soft';
			font-size: 40px;
			font-weight: 800;
			text-transform: capitalize;
		}
	}

	.loader-container {
		width: 100%;
		.skeleton {
			width: fit-content;
			display: flex;
			height: fit-content !important;
			::ng-deep .loader {
				height: 18px !important;
				margin-bottom: 0px !important;
				border-radius: 10px !important;
				opacity: 0.2;
				background-color: $color-medium-dark;
			}
		}
		.loader-header-container {
			width: 100%;
			.title-loader {
				width: 40%;
			}
			.description-loader {
				width: 60%;
			}
		}
		.loader-percentage-score-container {
			display: flex;
			align-items: center;
			width: 60px;
			height: 32px;
			border-radius: 6px;
			border: 0.5px solid #d7c5ff;
			background: linear-gradient(140deg, #f8eaff 20.61%, $color-white 104.6%);
			box-shadow: 0px 0px 2px 0px rgba(11, 22, 62, 0.08) inset, 0px 0px 10px 0px rgba(11, 22, 62, 0.04) inset;
			padding: 8px 10px 4px 10px;
			.percentage-score-loader {
				width: 100%;
				::ng-deep .loader {
					height: 20px !important;
				}
			}
		}
	}
}
::ng-deep .mat-tooltip.tooltip-contanier {
	font-size: 16px !important;
	font-weight: 500 !important;
	color: $color-white !important;
	background-color: $color-black !important;
	border-radius: 10px !important;
	padding: 14px !important;
	font-family: haboro-soft, sans-serif !important;
	white-space: pre-line !important;
}
