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

.contaienr {
	mat-form-field.with-label {
		width: 100%;
		.included-tags-input {
			height: 20px;
			color: $color-black;
			font-weight: 500;
			font-size: 16px;
			outline: none;
			border: 0;
			margin: 0px !important;
			background-color: $color-container-background;
		}
		.included-tags-input::placeholder {
			font-weight: 500;
			font-size: 16px;
		}

		.search-icon {
			border-radius: 50%;
			background-color: $color-white;
			margin-inline-end: 8px;
			cursor: pointer;
			&:hover {
				background-color: $color-primary;
				mat-icon {
					color: $color-white;
				}
			}
			mat-icon {
				background-color: transparent;
				color: $color-black;
				font-size: 24px;
				width: 24px;
				height: 24px;
				padding: 4px;
				line-height: unset;
			}

			.clear-icon-button {
				width: 32px !important;
				height: 32px !important;
				line-height: unset;
				&:focus,
				&:hover {
					background-color: $color-primary;
					mat-icon {
						color: $color-white !important;
					}
					::ng-deep {
						.mat-button-focus-overlay {
							background-color: transparent;
						}
					}
				}
			}
		}
	}
	.mat-chip-container {
		width: 100%;
		height: 23px;
		.arrow-drop-button {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0;
			background-color: $color-white;
			cursor: pointer;
			width: 18px;
			height: 18px;
			mat-icon {
				width: 20px;
				height: 20px;
				font-size: 20px;
				color: $color-black;
			}
		}
		.selected-tag-mat-chip {
			display: flex;
			align-items: baseline;
			justify-content: center;
			min-height: 24px;
			padding: 2px 8px;
			background-color: $color-dark-blue;
			color: $color-container-background;
			font-size: 14px;
			font-weight: 500;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 110px;
			display: block;
		}
		.total-select-tags {
			width: 23px;
			height: 23px;
			border: 2px solid;
			padding: 3px;
			border-color: $color-primary;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-inline-start: 4px;
			box-sizing: border-box;
			span {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 14px;
				color: $color-primary;
			}
		}
	}
	.tag-list-container {
		width: 100%;
		max-height: 240px;
		overflow-y: auto;
		.tag-list {
			width: 100%;
			height: 32px;
			padding: 0 8px;
			box-sizing: border-box;
			border-radius: 10px;
			&:hover,
			:focus-within {
				background-color: $color-container-background;
			}
			.mat-checkbox-tag {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				color: $color-medium-dark;
				height: 32px;
				font-size: 14px;
				font-weight: 500;
				::ng-deep .mat-checkbox-layout {
					width: 100%;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.mat-checkbox-inner-container {
						margin: 0 4px 0 0;
						.mat-checkbox-frame {
							border-color: $color-medium-dark;
						}
					}
				}

				::ng-deep .mat-checkbox-label {
					max-width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					display: block;
				}
			}
		}
	}

	mat-chip-list {
		::ng-deep {
			.mat-chip-list-wrapper {
				gap: 4px !important;
				flex-wrap: nowrap;
			}
		}
	}

	::ng-deep {
		::-webkit-scrollbar-track {
			background: $color-container-background !important;
		}
		::-webkit-scrollbar-thumb {
			box-shadow: none !important;
			background: rgba(17, 41, 96, 0.4) !important;
		}
	}
}
