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

:host {
	::ng-deep {
		mat-chip {
			display: flex;
			align-items: center;
			justify-content: center;
			height: fit-content;
			background-color: $color-dark-blue !important;
			color: $color-container-background !important;
			font-weight: 500;
			font-size: 14px;
			padding: 2px 8px;
			border-radius: 16px;
			margin: 0px !important;
			border: 1px solid $color-container-background;
			min-height: auto !important;
			line-height: normal !important;

			.mat-chip-ripple {
				display: none;
			}

			mat-icon {
				margin-inline-start: 4px;
			}
		}

		.mat-chip-list-wrapper {
			margin-inline-start: 0px !important;
		}

		.plus-chip {
			border-radius: 16px !important;
			border: 1px solid $color-primary !important;
			color: $color-primary !important;
			background: $color-white !important;
			display: flex !important;
			padding: 2px 3px !important;
			align-items: center !important;
			gap: 10px !important;
			font-size: 14px !important;
			font-style: normal !important;
			font-weight: 500 !important;
			line-height: normal !important;
			box-sizing: border-box;
		}

		.ai-source-match {
			background: $color-light-ai-detected-text !important;
			color: $color-ai-tab !important;
			font-weight: 800 !important;
		}
	}
}
