/* System / Light / Dark selector (_ThemeToggle): the navbar's Theme submenu and the sign-in header. */
.themeToggle {
	display: inline-flex;
	vertical-align: middle;
	border: 1px solid currentColor;
	border-radius: var(--border-radius-md);
	overflow: hidden;
}

	.themeToggle .themeToggle-option {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		max-width: none;
		margin: 0;
		padding: 6px 10px;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background-color: transparent;
		color: inherit;
		font-size: 0.9em;
		font-weight: normal;
		white-space: nowrap;
	}

		.themeToggle .themeToggle-option + .themeToggle-option {
			border-left: 1px solid currentColor;
		}

		.themeToggle .themeToggle-option:hover {
			background-color: transparent;
			color: inherit;
			text-decoration: underline;
		}

		.themeToggle .themeToggle-option:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: -4px;
		}

/* On the brand-coloured navbar */
.themeToggle-item {
	padding: 10px 10px 10px 20px;
	color: var(--color-text-inverse);
}

	#floatingSubmenuContainer .themeToggle-item {
		padding: 5px 10px;
	}

	.themeToggle-item .themeToggle .themeToggle-option[aria-pressed="true"] {
		background-color: var(--color-surface);
		color: var(--color-brand-text);
	}

/* In the sign-in header, beside the language links */
.themeToggle--iconOnly {
	margin-right: 10px;
	color: var(--color-brand-text);
}

	.themeToggle--iconOnly .themeToggle-option {
		font-size: 1.1em;
	}

	.themeToggle.themeToggle--iconOnly .themeToggle-option[aria-pressed="true"] {
		background-color: var(--color-brand);
		color: var(--color-text-inverse);
	}

/* FR | EN beside it in the account headers (_LanguageSwitch), same segmented look */
.themeToggle.langToggle {
	margin-right: 0;
}

	.langToggle .themeToggle-option {
		font-weight: bold;
		letter-spacing: 0.04em;
	}