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

@mixin input-icon($margin-left) {
	margin-top: 0.625rem;
	margin-left: $margin-left;
}

$tc-subheader-active-color: tokens.$coral-color-accent-text-active !default;
$tc-subheader-hover-focus-color: tokens.$coral-color-accent-text-hover !default;
$tc-subheader-color: tokens.$coral-color-neutral-text !default;
$tc-subheader-bar-height: 4.375rem !default;
$tc-svg-icon-size: $padding-large !default;

.tc-subheader {
	border-bottom: 0.0625rem solid tokens.$coral-color-neutral-border-weak;
	width: 100%;

	:global(.btn-link),
	:global(.btn-icon-only) {
		color: tokens.$coral-color-accent-icon;

		&:focus,
		&:hover {
			color: tokens.$coral-color-accent-icon-hover;
		}

		&:active {
			color: tokens.$coral-color-accent-icon-active;
		}
	}

	&-navbar {
		height: $tc-subheader-bar-height;
		background-color: tokens.$coral-color-neutral-background-medium;
		display: flex;
		padding: {
			left: 0;
			right: $padding-large;
		}

		&-left,
		&-center,
		&-right {
			display: flex;
		}

		&-left {
			flex: 1;
		}

		&-right {
			margin-left: $padding-normal;
			justify-content: flex-end;

			:global(.btn-icon-only) {
				padding: {
					left: 0;
					right: 0;
				}
			}
		}

		&-center {
			margin-left: auto;
			margin-right: auto;
			padding-left: $padding-smaller;
			padding-right: $padding-smaller;

			&-no-margin-right {
				margin-right: 0;
			}
		}
	}

	&-back-button {
		color: tokens.$coral-color-neutral-text;
		/* stylelint-disable-next-line declaration-no-important */
		background-color: tokens.$coral-color-neutral-background-strong !important;
		width: $tc-subheader-bar-height;
		height: $tc-subheader-bar-height;
		display: flex;
		align-items: center;
		justify-content: center;

		&:focus,
		&:hover,
		&:active {
			color: $tc-subheader-hover-focus-color;
			background-color: tokens.$coral-color-neutral-background-medium;
		}

		&:active {
			color: $tc-subheader-active-color;
		}

		.tc-svg-icon {
			width: $tc-svg-icon-size;
			height: $tc-svg-icon-size;
		}
	}
}