@import '../../styles/website-colors.styles.scss';
@import '../../styles/styles.scss';
@import '../../styles/cls-mat-components-overrides/cls-mat-chip-overrides.scss';
@import '../../styles/cls-mat-components-overrides/cls-mat-checkbox-overrides.scss';
@import '../../styles/cls-mat-components-overrides/cls-mat-inputs-overrides.scss';
@import '../../styles/cls-mat-components-overrides/cls-scroll-bar-overrides.scss';
@import '../../styles/cls-accessibility-overrides/cls-accessibility-overrides.scss';

:host {
	display: flex;
	flex-direction: column;
	font-family: haboro-soft, sans-serif !important;
	::ng-deep {
		input,
		button {
			font-family: haboro-soft, sans-serif !important;
		}

		.disabled-section {
			opacity: 0.5;
			pointer-events: none;
		}
	}

	.mat-dialog-title,
	.mat-dialog-content {
		margin-bottom: 32px !important;
	}

	.header-container {
		display: flex;
		flex-direction: row;
		.title-container {
			display: flex;
			flex-direction: column;
			gap: 4px;
			flex-grow: 1;
			.dialog-title {
				font-size: 20px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				text-transform: capitalize;
				color: $color-black;
				margin-bottom: 4px;
			}
			.corrections-stats {
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				color: $color-black;
			}

			.stats-chips-container {
				display: flex;
				flex-direction: row;
				align-content: center;
				justify-content: flex-start;
				gap: 4px;
			}

			.excluded-chip,
			.filtered-chip {
				width: fit-content;
				height: fit-content;
				line-height: normal;
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				font-family: haboro-soft, sans-serif !important;
				cursor: pointer;
			}

			.filtered-chip {
				cursor: auto !important;
			}
		}
		.clear-filter-btn {
			align-self: flex-start;
			display: flex;
			flex-direction: row;
			gap: 4px;
			align-items: center;
			color: $color-primary;
			width: unset;
			height: unset;
			border-radius: unset;
			line-height: unset;

			cursor: pointer;
			.clear-filter-button-icon {
				$icon-size: 24px;
				width: $icon-size;
				height: $icon-size;
				font-size: $icon-size;
				line-height: 20px;
			}

			.clear-filter-button-text {
				font-size: 14px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				white-space: nowrap;
			}
		}
	}

	.content-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px;
		margin: 0px !important;
		padding: 0px !important;
		margin-bottom: 32px !important;

		.corrections-container {
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			gap: 16px;
			.correction-type-container {
				display: flex;
				flex-direction: column;
				gap: 8px;
				.correction-type-title {
					font-size: 16px;
					font-style: normal;
					font-weight: 700;
					line-height: normal;
					text-transform: capitalize;
					color: $color-black;
				}
				.correction-categories-container {
					display: flex;
					flex-direction: column;
					gap: 8px;
					.category-checkbox {
						::ng-deep {
							.category-name {
								font-size: 16px;
								font-style: normal;
								font-weight: 500;
								line-height: normal;
								color: $color-black;
							}
							.total-stat {
								font-size: 12px;
								font-style: normal;
								font-weight: 700;
								line-height: normal;
								text-transform: uppercase;
								color: $color-black;
							}
							.mat-checkbox-inner-container {
								margin-inline-end: 8px !important;
							}

							.mat-checkbox-label {
								display: flex;
								flex-direction: row;
								gap: 8px;
								align-items: center;
							}
						}
						&:focus-within:not(:hover) {
							::ng-deep {
								.mat-checkbox-ripple {
									display: unset !important;
								}
							}
						}
					}
				}
			}
		}
	}

	.apply-and-discard-button-contaier {
		display: flex;
		justify-content: flex-end;
		gap: 16px;
		padding: 0px !important;
		margin: 0px !important;
		min-height: auto !important;
		button {
			cursor: pointer;
			border-radius: 24px 0px 16px 24px;
		}
		.discard-changes-button {
			font-size: 16px !important;
			font-weight: 500;
			font-family: haboro-soft, sans-serif !important;
		}
		.apply-filters-button {
			font-size: 18px !important;
			font-weight: 700 !important;
		}
	}

	.excluded-header-container {
		display: flex;
		flex-direction: column;
		gap: 8px;
		.excluded-title-exit-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.excluded-title-container {
				font-size: 12px;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				text-transform: uppercase;
				display: flex;
				align-items: center;
				gap: 8px;
				.dialog-title,
				.ignored-corrections-stats {
					font-style: normal;
					font-weight: 700;
					line-height: normal;
					text-transform: capitalize;
				}
				.dialog-title {
					color: $color-dark-blue;
					font-size: 14px;
				}
				.ignored-corrections-stats {
					color: $color-black;
					font-size: 12px;
				}
			}

			.close-dialog-btn {
				width: 18px;
				height: 18px;

				&:hover,
				&:focus {
					.exit-filter-button-icon {
						color: $color-primary;
					}
				}

				.exit-filter-button-icon {
					width: 18px;
					height: 18px;
					font-size: 18px;
					color: $grayed-out-disabled;
					cursor: pointer;
					line-height: 1px;
				}

				.exit-filter-button-icon:hover {
					color: $color-primary;
				}
			}
		}
	}

	.correction-info-container {
		width: 100%;
		height: 500px;
		::ng-deep .cdk-virtual-scroll-content-wrapper {
			width: 100%;
			gap: 8px;
			display: flex;
			flex-direction: column;
			padding-inline-end: 4px !important;
			box-sizing: border-box;
			> cr-correction {
				height: 107px;
				border-radius: 7px;
				border: 2px solid rgba(255, 154, 2, 0.2);
				background: $color-white;
				box-shadow: 0px 4px 40px -1px rgba(11, 22, 62, 0.06);
				backdrop-filter: blur(25px);
				cursor: auto;
			}

			> cr-correction:hover {
				border-color: rgba(255, 154, 2, 0.2);
			}
		}
	}

	::ng-deep {
		.mat-form-field-wrapper {
			padding-bottom: 8px !important;
		}
	}

	.excluded-header-container,
	.excluded-content-container {
		padding: 0px !important;
		margin: 0px !important;
	}

	form {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 32px;
		margin: 0px !important;
		padding: 0px !important;
		width: 100%;
	}

	.include-all-container {
		display: flex;
		padding: 0px !important;
		min-height: auto !important;
		align-items: center;
		box-sizing: border-box;
		margin-bottom: 0px !important;
		margin-top: 8px !important;
		.include-all-btn {
			color: $color-primary;
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			cursor: pointer;
			&:hover {
				text-decoration-line: underline;
			}
		}
	}

	.search-input-search-icon {
		font-size: 24px !important;
		width: 24px !important;
		height: 24px !important;
		padding: 2px !important;
		line-height: unset !important;
	}
}

::ng-deep {
	.excluded-corrections-dialog {
		width: 450px !important;
	}
}

.icon-button {
	width: unset;
	height: unset;
	border-radius: unset;
	line-height: unset;
	padding: 0;
	&:focus-visible {
		outline: 2px solid black !important;
	}
}
