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

$circle-size-large: 1.375rem !default;
$circle-size-small: 1.125rem !default;

.tc-badge-operator {
	align-items: center;
	background: tokens.$coral-color-neutral-background;
	border-radius: 100%;
	display: inline-flex;
	justify-content: center;
	margin: 0 0 0 tokens.$coral-spacing-xs;

	&-small {
		height: $circle-size-small;
	}

	&-large {
		height: $circle-size-large;
	}

	&-button {
		display: flex;

		> button {
			height: tokens.$coral-sizing-xxs !important;
		}
	}

	&-popover {
		display: flex;
		flex-direction: column;
	}
}