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

$tc-headerbar-logo-width: tokens.$coral-sizing-s !default;
$tc-headerbar-logo-full-width: 5.3125rem !default;

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

[data-theme='qlik-light'] {
	.tc-header-bar {
		border-bottom: 1px solid tokens.$coral-color-neutral-border-weak;
	}
}

.tc-header-bar {
	background: tokens.$coral-color-brand-background;
	color: tokens.$coral-color-brand-text;
	display: flex;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: tokens.$coral-elevation-layer-standard-front;

	svg {
		margin: 0;
	}

	a svg {
		margin: 0 $padding-smaller;
	}

	ul {
		list-style: none;
	}

	:global {
		.dropdown-menu {
			a svg path {
				fill: tokens.$coral-color-neutral-icon;
			}
		}
	}

	:global {
		.tc-dropdown-button,
		.btn-link,
		.tc-header-bar-action.tc-header-bar-help a,
		.tc-header-bar-logo.btn-link {
			color: tokens.$coral-color-brand-text;
			&:hover,
			&:focus {
				color: tokens.$coral-color-brand-text;
				background-color: tokens.$coral-color-brand-background-weak-hover;
			}
		}
	}

	.tc-header-bar-actions {
		align-items: center;
		display: flex;
		padding: 0;
		margin: 0;

		&.right {
			margin-left: auto;
		}

		.tc-header-bar-action {
			list-style: none;
			display: flex;
			align-items: center;
			height: 100%;

			&.separated:not(:last-child)::after {
				content: ' ';
				display: block;
				width: 1px;
				height: $font-size-large;
				background-color: tokens.$coral-color-brand-text;
			}

			:global {
				.tc-typeahead-item-title,
				.tc-typeahead-item-description {
					white-space: initial;
				}
			}
		}

		.tc-header-bar-logo {
			padding: 0;
			width: calc($tc-headerbar-logo-width + tokens.$coral-sizing-branding-logo);
			background-image: tokens.$coral-branding-logo;
			background-size: tokens.$coral-sizing-branding-logo;
			background-repeat: no-repeat;
			background-position-x: center;
			background-position-y: center;

			:global(.tc-svg-icon) {
				padding: 0;
				height: 1.75rem;
				width: 1.75rem;
			}

			&.full {
				width: auto;
				background-image: none;

				:global(.tc-svg-icon) {
					padding: 0 $padding-normal;
					width: $tc-headerbar-logo-full-width;
				}
			}
		}

		.tc-header-bar-brand:global(.btn):global(.btn-link) {
			font-size: $font-size-base;
		}

		.tc-header-bar-call-to-action {
			:global {
				.btn.btn-info.btn-inverse {
					background-color: tokens.$coral-color-neutral-background;
					border: none;
					margin-right: $padding-normal;

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

	.tc-header-bar-products + :global(.dropdown-menu) :global(.tc-svg-icon) {
		height: $svg-lg-size;
		width: $svg-lg-size;
	}

	.tc-header-bar-brand :global(.tc-svg-icon:first-child) {
		height: $svg-lg-size;
		width: $svg-lg-size;
	}

	.tc-header-bar-brand + :global(.dropdown-menu) {
		min-width: 100%;
		width: auto;
	}

	:global(.dropdown) {
		height: 100%;

		:global(.caret) {
			box-shadow: 2px -2px 0 tokens.$coral-color-neutral-text-inverted;
			border: none;
			margin-left: $padding-small;
			margin-bottom: $padding-smaller;
		}

		&:global(.open) {
			:global(.caret) {
				margin-top: $padding-small;
			}
		}
	}

	.tc-header-bar-search {
		form {
			height: $navbar-height;
			padding-left: 0;

			:global(.tc-typeahead-container) > div:first-child {
				margin-top: 0;
				margin-bottom: 0;

				padding-right: $padding-large;
				height: $navbar-height;
				background: tokens.$coral-color-neutral-background;

				:global(.form-control) {
					font-style: italic;
					animation: fadeIn 0.2s;
					width: 400px;
				}
			}
		}
	}

	.tc-header-bar-intercom-default-component {
		border-radius: 50%;
		color: tokens.$coral-color-brand-text;
		min-height: auto;
		height: 2rem;
		width: 2rem;
		margin: 0 $padding-small;
		padding: 0;
	}
}

:global(.intercom-namespace .intercom-app .intercom-messenger-frame) {
	top: 4.375rem;
}