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

:host {
	background-color: $color-white;
	display: flex;
	flex-direction: column;
	gap: 8px;
	.header-container {
		width: 100%;
		.header {
			color: $color-dark-blue;
			font-size: 14px;
			font-weight: 700;
		}
		.total-excluded {
			color: $color-black;
			font-size: 12px;
			font-weight: 700;
		}
		.close-icon {
			cursor: pointer;
			color: rgba(17, 41, 96, 0.4);
		}
	}

	.clear-input-search-btn {
		width: unset !important;
		height: unset !important;
		&:hover,
		&:focus {
			.clear-input-search-icon {
				color: $color-primary !important;
			}
		}
	}

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

	.search-container {
		width: 100%;
		padding: 4px 8px;
		border-radius: 10px;
		background-color: $color-container-background;
		.search-icon-contaier {
			background-color: $color-white;
			border-radius: 50%;
			width: 24px;
			height: 24px;
			&:hover,
			&:focus-within {
				background-color: $color-primary;
				mat-icon {
					color: $color-white;
				}
			}
			mat-icon {
				font-size: 18px;
				width: 18px;
				height: 18px;
			}
		}
		.search-input {
			color: $color-black;
			font-weight: 500;
			font-size: 16px;
			outline: none;
			border: 0;
			background-color: $color-container-background;
		}
		.included-tags-input::placeholder {
			font-size: 16px;
			font-weight: 500;
		}
	}

	.results-top-container {
		width: 100%;
		height: 500px;
		overflow: hidden;
		.results-container {
			display: flex;
			flex-direction: column;
			gap: 8px;
			overflow: auto;
			padding-inline-end: 4px;
			height: 100%;

			::ng-deep {
				.item-container {
					background-color: transparent !important;
				}
			}
		}
	}

	.include-all-button {
		padding: 0;
		border: 0;
		cursor: pointer;
		background-color: $color-white;
		color: $color-primary;
		font-size: 14px;
		font-weight: 500;
		text-decoration-line: underline;
	}

	.mat-dialog-content,
	.mat-dialog-title,
	.mat-dialog-actions {
		margin: 0px !important;
		padding: 0px !important;
	}

	.mat-dialog-content {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.mat-dialog-actions {
		min-height: auto !important;
	}
}
