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

.tc-app-switcher {
	:global(.tc-svg-icon:first-child) {
		height: $svg-lg-size;
		width: $svg-lg-size;

		path {
			fill: tokens.$coral-color-brand-text;
		}
	}
}

.tc-app-switcher-action {
	list-style: none;
	display: flex;
	align-items: center;
	height: 100%;
	white-space: nowrap;

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

	&.hasIcon {
		[role='heading'] {
			span:first-child {
				display: inline-flex;
				align-items: center;

				&::before {
					display: block;
					content: '';
					margin-right: $padding-smaller;
					height: $navbar-brand-logo-height;
					width: $navbar-brand-logo-height;
					background-repeat: no-repeat;
					background-color: tokens.$coral-color-neutral-background;
				}
			}

			svg + span:first-child {
				&::before {
					display: none;
				}
			}
		}
	}
}