@use '@talend/design-tokens/lib/tokens' as tokens;

// stylelint-disable scss/selector-no-redundant-nesting-selector
.tc-badge-faceted {
	padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs;
	max-width: fit-content;

	:global(.tc-badge-button) {
		max-width: none;
	}

	:global(.tc-badge-button:first-child) {
		flex-grow: 1;
		padding-top: 0;
		margin: 0;

		> span {
			align-self: center;
		}
	}

	:global(.tc-badge-delete-icon) {
		align-self: center;
	}

	&-overlay {
		align-items: center;
		display: flex;

		& > button {
			font-style: italic;
			height: tokens.$coral-sizing-xxs !important;

			> span > span {
				white-space: nowrap;
				overflow: hidden;
				max-width: calc(2 * tokens.$coral-sizing-l);
				text-overflow: ellipsis;
			}

			> span > span:not(:first-child)::before {
				content: '|';
				position: relative;
				left: calc(-1 * tokens.$coral-spacing-xxs);
				opacity: tokens.$coral-opacity-m;
				padding: 0 tokens.$coral-spacing-xxs;
			}
		}
	}


	&:global(.period) {
		.tc-badge-faceted-overlay {
			& > button {
				> span > span {
					max-width: none;
				}
			}
		}
	}
}