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

$icon-alignment-offset-m: -0.1875rem;

.dropdownEntry {
	background: tokens.$coral-color-accent-background-weak;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	color: tokens.$coral-color-neutral-text;
	font: tokens.$coral-paragraph-m;
	transition: tokens.$coral-transition-fast;
	padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-s;
	text-align: start;

	> span {
		min-width: 0;

		&:global(.checked) {
			font-weight: 600;
		}
	}

	.buttonIcon {
		margin-right: tokens.$coral-spacing-xxs;
		flex-shrink: 0;
		position: relative;
		bottom: $icon-alignment-offset-m;
	}

	.buttonContent {
		min-width: 0;
		flex: 1;
	}

	&:hover,
	&:focus {
		background: tokens.$coral-color-accent-background-weak-hover;
		color: tokens.$coral-color-accent-text-strong-hover;
	}

	&:active {
		background: tokens.$coral-color-accent-background-weak-active;
		color: tokens.$coral-color-accent-text-strong-active;
	}

	&:disabled {
		background: tokens.$coral-color-neutral-background;
		color: tokens.$coral-color-neutral-text-disabled;
	}
}