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

.inlineMessage {
	align-items: center;
	display: flex;

	font: tokens.$coral-paragraph-m;
	color: tokens.$coral-color-neutral-text;

	strong {
		font: tokens.$coral-paragraph-m-bold;
	}

	.icon {
		margin-right: tokens.$coral-spacing-xxs;
		width: tokens.$coral-sizing-xxxs;
		height: tokens.$coral-sizing-xxxs;
		display: inline-flex;
		// Visually align icon in inline mode
		position: relative;

		svg {
			width: tokens.$coral-sizing-xxxs;
			height: tokens.$coral-sizing-xxxs;
		}
	}

	> * {
		display: inline;
	}

	&__contents {
		> * {
			display: inline;
			margin-right: tokens.$coral-spacing-xxs;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	&_withBackground {
		display: inline-flex;
		padding: tokens.$coral-spacing-xxs tokens.$coral-spacing-xs;
		border-radius: tokens.$coral-radius-s;
		justify-content: flex-start;
		align-items: flex-start;

		.icon {
			// Visually align icon in inline-flex mode
			top: 0.0625rem;
		}
	}
}