@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

$tc-badge-large-label-font-size: 0.875rem !default;
$tc-badge-large-label-font-weight: normal !default;
$tc-badge-large-label-with-categ-font-weight: $font-weight-semi-bold !default;
$tc-badge-large-height: 1.5rem !default;
$tc-badge-large-vertical-padding: calc((#{$tc-badge-large-height} - #{$tc-badge-large-label-font-size} * #{$line-height-base}) / 2) !default; // $line-height-base / 2
$tc-badge-large-margin: $padding-smaller !default;
$tc-badge-large-delete-icon-size: $svg-xs-size !default;
$tc-badge-large-icon-size: $svg-xs-size !default;
$tc-badge-large-padding: $padding-small;

$tc-badge-small-label-font-size: 0.75rem !default;
$tc-badge-small-label-font-weight: normal !default;
$tc-badge-small-label-with-categ-font-weight: $font-weight-semi-bold !default;
$tc-badge-small-height: 1.25rem !default;
$tc-badge-small-vertical-padding: calc((#{$tc-badge-small-height} - #{$tc-badge-small-label-font-size} * #{$line-height-base}) / 2) !default; // $line-height-base / 2
$tc-badge-small-margin: $padding-smaller !default;
$tc-badge-small-delete-icon-size: calc(#{$svg-sm-size} / 2) !default;
$tc-badge-small-icon-size: $svg-xs-size !default;
$tc-badge-small-padding: 0.5rem;

$tc-badge-disabled-opacity: 0.62;

@mixin colored-badge($background-color, $color, $border) {
	.tc-badge-button {
		background-color: $background-color;
		color: $color;
		border-color: $border;

		.tc-badge-separator {
			background-color: $color;
		}

		[class^='tc-badge-'],
		:global(.btn-link),
		.tc-badge-delete-icon svg {
			color: inherit;
		}
	}
}

.tc-badge {
	display: inline-flex;
	max-width: 14.6875rem;

	&:not(.tc-badge-readonly) {
		cursor: pointer;
	}

	.tc-badge-button {
		display: inline-flex;
		background-color: tokens.$coral-color-neutral-background-medium;
		border: solid 1px;
		border-color: tokens.$coral-color-neutral-border-weak;
		border-radius: 25px;
		max-width: 100%;

		&.tc-badge-white {
			background-color: tokens.$coral-color-neutral-background;
		}

		.tc-badge-category {
			flex-grow: 0;
			flex-shrink: 0;
			color: tokens.$coral-color-neutral-text;
			max-width: 110px;
			overflow: hidden;
			white-space: pre;
			text-overflow: ellipsis;
		}

		.tc-badge-separator {
			flex-grow: 0;
			flex-shrink: 0;
			height: 12px;
			width: 1px;
			background-color: tokens.$coral-color-neutral-border-weak;
			margin: $padding-smaller;

			&.tc-badge-separator-icon {
				margin-right: 0;
			}
		}

		.tc-badge-label {
			display: flex;
			flex-grow: 1;
			flex-shrink: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: pre;

			&-text,
			&-text-with-categ {
				color: tokens.$coral-color-neutral-text;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			&-icon {
				color: tokens.$coral-color-neutral-icon;
				flex-grow: 0;
				flex-shrink: 0;
				margin-left: $padding-smaller;
			}
		}

		.tc-badge-delete-icon {
			display: flex;
			flex-grow: 0;
			flex-shrink: 0;
			padding: 0;
			background: transparent;
			box-shadow: none;
			padding-left: $padding-smaller;

			svg {
				color: tokens.$coral-color-neutral-icon-weak;
				display: block;
				margin: 0;

				&:hover {
					color: tokens.$coral-color-accent-text;
				}
			}
		}

		.tc-badge-dropdown {
			display: flex;
			flex-grow: 0;
			flex-shrink: 0;
			padding: 0;
			padding-left: $padding-smaller;
			text-transform: none;
			color: tokens.$coral-color-neutral-text;

			span {
				max-width: 10rem;
				display: block;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			svg {
				color: $slate-gray;
				margin: $padding-smaller;

				&:hover {
					color: tokens.$coral-color-accent-text;
				}
			}

			&:hover,
			&:focus,
			&:focus-within {
				outline: none;
			}
		}
	}

	&.tc-badge-display-large {
		.tc-badge-separator {
			margin-top: 0.25rem;
		}

		.tc-badge-button {
			height: $tc-badge-large-height;
			margin: $tc-badge-large-margin;
			padding-top: 2px;
			padding-left: $tc-badge-large-padding;
			padding-right: $tc-badge-large-padding;

			.tc-badge-category {
				font-size: $tc-badge-large-label-font-size;
				font-weight: $tc-badge-large-label-font-weight;
			}

			.tc-badge-label {
				&-text {
					font-size: $tc-badge-large-label-font-size;
					font-weight: $tc-badge-large-label-font-weight;
				}

				&-text-with-categ {
					font-size: $tc-badge-large-label-font-size;
					font-weight: $tc-badge-large-label-with-categ-font-weight;
				}

				&-icon {
					margin-top: $padding-smaller;
					height: $tc-badge-large-icon-size;
					width: $tc-badge-large-icon-size;
					min-width: $tc-badge-large-icon-size;
				}
			}

			.tc-badge-delete-icon {
				height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding});
				min-height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding});

				svg {
					height: $tc-badge-large-delete-icon-size;
					width: $tc-badge-large-delete-icon-size;
				}
			}

			.tc-badge-dropdown {
				height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding});
				min-height: calc(#{$tc-badge-large-height} - 2 * #{$tc-badge-large-vertical-padding});
				font-size: $tc-badge-large-label-font-size;
				font-weight: $tc-badge-large-label-with-categ-font-weight;

				svg {
					height: $tc-badge-large-delete-icon-size;
					width: $tc-badge-large-delete-icon-size;
				}
			}
		}
	}

	&.tc-badge-display-small {
		.tc-badge-separator {
			margin-top: 0.1875rem;
		}

		.tc-badge-button {
			height: $tc-badge-small-height;
			margin: $tc-badge-small-margin;
			padding-top: 0;
			padding-left: $tc-badge-small-padding;
			padding-right: $tc-badge-small-padding;

			.tc-badge-category {
				font-size: $tc-badge-small-label-font-size;
				font-weight: $tc-badge-small-label-font-weight;
			}

			.tc-badge-label {
				&-text {
					font-size: $tc-badge-small-label-font-size;
					font-weight: $tc-badge-small-label-font-weight;
				}

				&-text-with-categ {
					font-size: $tc-badge-small-label-font-size;
					font-weight: $tc-badge-small-label-with-categ-font-weight;
				}

				&-icon {
					margin-top: $padding-smaller;
					height: $tc-badge-small-icon-size;
					width: $tc-badge-small-icon-size;
					min-width: $tc-badge-small-icon-size;
				}
			}

			.tc-badge-delete-icon {
				height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding});
				min-height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding});

				svg {
					height: $tc-badge-small-delete-icon-size;
					width: $tc-badge-small-delete-icon-size;
				}
			}

			.tc-badge-dropdown {
				height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding});
				min-height: calc(#{$tc-badge-small-height} - 2 * #{$tc-badge-small-vertical-padding});
				font-size: $tc-badge-small-label-font-size;
				font-weight: $tc-badge-small-label-with-categ-font-weight;

				svg {
					height: $tc-badge-small-delete-icon-size;
					width: $tc-badge-small-delete-icon-size;
				}
			}
		}
	}

	&-aslink {
		.tc-badge-button {
			border-color: tokens.$coral-color-accent-border;

			.tc-badge-category {
				display: none;
			}

			.tc-badge-separator {
				display: none;
			}

			.tc-badge-label {
				.tc-badge-label-text,
				.tc-badge-label-icon {
					color: tokens.$coral-color-accent-text;
				}
			}
		}

		&:hover:not(.tc-badge-disabled) {
			.tc-badge-button {
				border-color: tokens.$coral-color-accent-border;
			}
		}
	}

	&-edit:not(&-disabled) {
		.tc-badge-label:hover {
			.tc-badge-label-text,
			.tc-badge-label-text-with-categ,
			.tc-badge-label-icon {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&-selected:not(&-disabled) {
		.tc-badge-label {
			.tc-badge-label-text,
			.tc-badge-label-text-with-categ,
			.tc-badge-label-icon {
				color: tokens.$coral-color-accent-text;
			}
		}
	}

	&-disabled {
		.tc-badge-button {
			opacity: $tc-badge-disabled-opacity;
		}
	}

	&--valid {
		@include colored-badge(tokens.$coral-color-success-background, tokens.$coral-color-success-text, tokens.$coral-color-success-border);
	}

	&--invalid {
		@include colored-badge(tokens.$coral-color-danger-background, tokens.$coral-color-danger-text, tokens.$coral-color-danger-border);
	}

	&--empty {
		@include colored-badge(tokens.$coral-color-neutral-background-medium, tokens.$coral-color-neutral-text, tokens.$coral-color-neutral-border);
	}

	&--pattern {
		@include colored-badge(tokens.$coral-color-warning-background, tokens.$coral-color-warning-text, tokens.$coral-color-warning-border);
	}

	&--value {
		@include colored-badge(tokens.$coral-color-accent-background, tokens.$coral-color-accent-text, tokens.$coral-color-accent-border);
	}

	&-dropdown {
		.tc-badge-button {
			&:not(.tc-badge-disabled) {
				&:focus-within {
					border-color: tokens.$coral-color-accent-border;
				}
			}
		}
	}
}