.wp-block-mai-preferred-source.alignleft {
	text-align: start;
}

.wp-block-mai-preferred-source.aligncenter {
	text-align: center;
}

.wp-block-mai-preferred-source.alignright {
	text-align: end;
}

:where(.wp-block-mai-preferred-source:not(.wp-block-button)) {
	font: 500 14px/1.2 "Google Sans Text", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: .1px;
}

.mai-preferred-source-script {
	min-height: 40px;
}

.mai-preferred-source {
	--mps-bg: #fff;
	--mps-bg-hover: #f8f9fa;
	--mps-bg-active: #f1f3f4;
	--mps-border: #c4c7c5;
	--mps-text: #1f1f1f;

	/* Themes like Mai underline and dim links on hover through these. */
	--link-text-decoration-hover: none;
	--link-filter-hover: unset;

	display: inline-flex;
	align-items: center;
	gap: .571em;
	box-sizing: border-box;
	max-inline-size: 100%;
	min-block-size: 2.857em;
	padding: .286em 1.143em .286em 1em;
	border: 1px solid var(--mps-border);
	border-radius: 1.429em;
	background: var(--mps-bg);
	color: var(--mps-text);
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
	text-align: start;
	text-wrap: balance;

	&:hover,
	&:focus-visible {
		color: var(--mps-text);
		filter: none;
		text-decoration: none;
	}

	&:hover {
		background: var(--mps-bg-hover);
	}

	&:active {
		background: var(--mps-bg-active);
	}

	&:focus-visible {
		outline: 2px solid var(--mps-text);
		outline-offset: 2px;
	}
}

.mai-preferred-source__logo {
	flex: none;
	inline-size: 1.571em;
	block-size: 1.571em;
}

.is-style-dark .mai-preferred-source {
	--mps-bg: #202124;
	--mps-bg-hover: #303134;
	--mps-bg-active: #35363a;
	--mps-border: #5f6368;
	--mps-text: #e8eaed;
}

@media (prefers-color-scheme: dark) {
	.is-style-auto .mai-preferred-source {
		--mps-bg: #202124;
		--mps-bg-hover: #303134;
		--mps-bg-active: #35363a;
		--mps-border: #5f6368;
		--mps-text: #e8eaed;
	}
}