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

.status {
	display: flex;
	font: tokens.$coral-paragraph-m-bold;
	color: tokens.$coral-color-neutral-text-weak;

	.status {
		&__icon {
			width: tokens.$coral-sizing-xxxs;
			color: tokens.$coral-color-neutral-icon-weak;
		}

		&__text {
			white-space: nowrap;
		}

		&__icon,
		&__text {
			display: inline-flex;
			align-items: center;
		}
	}

	&.failed {
		color: tokens.$coral-color-danger-text;

		.status__icon {
			color: tokens.$coral-color-danger-icon;
		}
	}

	&.successful {
		color: tokens.$coral-color-success-text;

		.status__icon {
			color: tokens.$coral-color-success-icon;
		}
	}

	&.inProgress {
		color: tokens.$coral-color-info-text;

		.status__icon {
			color: tokens.$coral-color-info-icon;
		}
	}

	&.warning {
		color: tokens.$coral-color-warning-text;

		.status__icon {
			color: tokens.$coral-color-warning-icon;
		}
	}
}