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

:host {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	padding: 0px 6px 6px 0px;
	box-sizing: border-box;
	min-height: 38px;
	border-bottom: 1px solid $color-container-background;
}

[dir='rtl'] {
	::ng-deep {
		.clear-filter-icon {
			margin-inline-start: 0px !important;
			margin-inline-end: 4px !important;
		}
	}
}

.actions-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.skeleton {
	width: fit-content;
	display: flex;
	height: fit-content !important;
	::ng-deep .loader {
		height: 19px !important;
		margin-bottom: 0px !important;
		border-radius: 10px !important;
		opacity: 0.2;
		background-color: $color-medium-dark;
	}
}

.actions-loader-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	.search-input-loader {
		::ng-deep .loader {
			height: 13px !important;
		}
	}

	.icons-loader-container {
		display: flex;
		flex-direction: row;
		gap: 8px;

		.circle {
			::ng-deep .loader {
				width: 24px !important;
				height: 24px !important;
				border-radius: 50% !important;
			}
		}
	}
}

.tootal-results-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	.tootal-results {
		font-weight: 700;
		font-size: 14px;
		white-space: nowrap;
		margin: 0;
	}

	.separate-circle-icon {
		height: 4px;
		width: 4px;
		font-size: 4px;
		color: $color-medium-dark;
		opacity: 0.4;
	}

	.tootal-excuded,
	.tootal-filtered {
		font-weight: 400;
		font-size: 14px;
		color: $color-primary;
		text-decoration: underline;
		cursor: pointer;
	}
}

.input-search-container {
	width: 100%;

	mat-icon {
		color: $color-black;
		cursor: pointer;
	}
	.search-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $color-white;
		border-radius: 50%;
		height: 24px;
		width: 24px;
		padding: 0;
		border: 0;
		mat-icon {
			background-color: $color-white;
			border-radius: 50%;
		}
	}
	input {
		width: 100%;
		border: 0px;
		outline: 0px;
		background-color: $color-container-background;
		font-size: 16px;
	}

	.clear-button {
		width: 24px !important;
		height: 24px !important;
		mat-icon {
			width: 24px !important;
			height: 24px !important;
			font-size: 24px !important;
		}
	}
	.clear-button:focus,
	.clear-button:hover {
		mat-icon {
			color: $color-primary;
		}
	}
}

.results-search-filter-container {
	mat-icon {
		cursor: pointer;
		color: $color-dark-blue;
		width: 24px !important;
		height: 24px !important;
		font-size: 24px !important;
	}
}

::ng-deep .filter-result-dailog .mat-dialog-container {
	background-color: $color-white !important;
	padding: 16px 6px 16px 16px !important;
	border-radius: 10px !important;
}

mat-icon:hover {
	color: $color-primary !important;
}

mat-icon {
	transition: color 0.4s;
}

.expanded-section-icon {
	transform: rotate(180deg);
}

.expand-icon {
	transition: transform 0.2s ease-in-out;
}

.search-icon,
.filter-search-icon {
	color: $color-black;
}

.search-icon {
	margin-inline-end: 8px !important;
	background-color: $color-white;
	border-radius: 50%;
	padding: 4px;
	cursor: auto !important;
	width: 24px !important;
	height: 24px !important;
	font-size: 24px !important;
	line-height: unset !important;
}

.search-icon:hover {
	color: $color-black !important;
}

.clear-icon {
	background-color: transparent !important;
	color: $color-black;
}

.search-input {
	margin: 0px !important;
}

.diselect-match-icon {
	cursor: pointer;
	color: $color-dark-blue;
	width: 24px !important;
	height: 24px !important;
	font-size: 24px !important;
}

.clear-filter-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: $color-container-background;
}

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

mat-chip {
	cursor: pointer;
}

cr-spinner {
	margin-inline-start: 5px;
}

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

.filter-chip {
	line-height: normal !important;
}

.icon-button {
	width: unset;
	height: unset;
	line-height: unset;
	min-width: unset;
	&:focus {
		mat-icon {
			color: $color-primary;
		}
	}
}

::ng-deep .input-search-container {
	.mat-form-field-wrapper {
		.mat-form-field-flex {
			border-radius: 30px !important;
			padding: 0px 4px 0px 3px;
		}
	}
}
