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

$tf-comparator-operator-height: 1.875rem !default;
$tf-comparator-operator-width: 3.125rem !default;
$tf-comparator-operator-top: 1.5rem !default;
$label-margin-top: 1.05rem;

.comparator {
	position: relative;

	:global {
		.dropdown {
			position: absolute;
			top: calc($label-margin-top + tokens.$coral-spacing-xxs);

			&-menu {
				min-width: auto;
			}

			.tc-svg-icon {
				flex-shrink: 0;
			}

			.btn {
				height: $tf-comparator-operator-height;
				width: $tf-comparator-operator-width;
				color: tokens.$coral-color-neutral-text;
				background: tokens.$coral-color-accent-background;
				border: 1px solid tokens.$coral-color-neutral-border;
				border-radius: tokens.$coral-radius-s 0 0 tokens.$coral-radius-s;
				z-index: 1;
				padding: {
					left: tokens.$coral-spacing-xxs;
					right: tokens.$coral-spacing-xxs;
				}
			}
		}

		input {
			padding-left: calc($tf-comparator-operator-width + tokens.$coral-spacing-xs);
		}
	}
}

.operator {
	&.selected {
		font-weight: bold;
	}

	.symbol + .name {
		padding-left: 0.625rem;
	}
}