@use '@talend/bootstrap-theme/src/theme/guidelines' as *;
@use '@talend/design-tokens/lib/tokens' as tokens;

@import '~@talend/bootstrap-theme/src/theme/animation';

@mixin ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

$tc-input-subheader-size-large: 1.5rem !default;
$tc-input-subheader-size-medium: 0.875rem !default;
$header-title-max-width: 56.25rem;

:global(.tc-subheader-details-blink) {
	@include heartbeat(object-blink);
}

.tc-subheader-details {
	display: flex;
	margin: 0;
	height: 100%;

	& &-icon {
		align-self: center;
		width: $tc-input-subheader-size-large;
		height: $tc-input-subheader-size-large;
		color: tokens.$coral-color-neutral-icon;
		margin-right: $padding-large;
	}

	& &-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		flex: 1 auto;
		margin-right: 110px;
		max-width: $header-title-max-width;
		align-items: flex-start;

		&-title {
			display: inline-flex;
			align-items: center;
			width: 100%;

			// force InlineEditing max space to allow ellipsis
			> * {
				max-width: $header-title-max-width;
			}

			&-wording,
			&-wording-button {
				@include ellipsis;
				line-height: unset;
				margin: 0;
			}

			input {
				width: tokens.$coral-sizing-maximal;
			}
		}

		&-subtitle {
			@include ellipsis;
			max-width: 100%;
			color: tokens.$coral-color-neutral-text;
			font-size: $tc-input-subheader-size-medium;

			> * {
				@include ellipsis;
				max-width: 100%;
			}
		}
	}

	& &-loading-subtitle {
		margin-top: $padding-smaller;
	}
}