/*
 * Der Anmeldeknopf.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * Bewusst SPARSAM. Der Knopf steht in fremden Formularen - in wp-login.php,
 * bei WooCommerce, in einem Elementor-Widget. Jedes dieser Umfelder bringt
 * eigene Stile mit, und ein Knopf, der ueberall gleich aussieht, sieht ueberall
 * ausser an einer Stelle falsch aus.
 *
 * Deshalb: eigene Farbe, eigener Fokuszustand, sonst so wenig wie moeglich.
 * Alles hier ist auf .pcrp-sso-button beschraenkt und faerbt nichts ein, was
 * dem Theme gehoert.
 * ─────────────────────────────────────────────────────────────────────────────
 */

.pcrp-sso-button-wrap {
	margin: 1em 0 0;
	clear: both;
}

.pcrp-sso-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em 1.2em;
	border: 1px solid #7a2d12;
	border-radius: 4px;
	background: #b8451f;
	color: #fff;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/*
 * Das Logo.
 *
 * `flex: 0 0 auto` haelt es bei einer langen Beschriftung in seiner Groesse -
 * ohne die Zeile schrumpft ein Flex-Kind, und aus dem runden Zeichen wird ein
 * gequetschtes Oval.
 *
 * Die feste Hoehe steht hier UND als Attribut am Bild: Das Attribut reserviert
 * den Platz, bevor CSS geladen ist, die Regel gilt danach. Auf wp-login.php
 * kommt beides aus verschiedenen Richtungen, und der Knopf soll in keinem der
 * beiden Momente springen.
 */
.pcrp-sso-button__logo {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	vertical-align: middle;
	/*
	 * Manche Themes setzen `max-width: 100%` und `height: auto` fuer jedes
	 * Bild im Inhalt. Ohne diese Zeile faellt die Hoehe darauf zurueck, und
	 * das Zeichen wird zu einem Strich.
	 */
	max-width: none;
	object-fit: contain;
}

.pcrp-sso-button__label {
	min-width: 0;
}

.pcrp-sso-button:hover,
.pcrp-sso-button:active {
	background: #9c3717;
	color: #fff;
	text-decoration: none;
}

/*
 * Der Fokuszustand ist keine Zierde.
 *
 * Wer mit der Tastatur navigiert, sieht ohne ihn nicht, wo er gerade steht -
 * und der Knopf ist auf einer Anmeldeseite oft das einzige bedienbare Element
 * neben den Feldern. `outline-offset` haelt den Ring sichtbar, auch wenn der
 * Knopf farblich mit dem Hintergrund verschmilzt.
 */
.pcrp-sso-button:focus,
.pcrp-sso-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	color: #fff;
}

/*
 * Auf wp-login.php steht der Knopf unter dem Anmeldeformular und braucht einen
 * Trenner - sonst wirkt er wie ein zweiter Absendeknopf desselben Formulars.
 */
body.login .pcrp-sso-button-wrap {
	margin-top: 1.2em;
	padding-top: 1.2em;
	border-top: 1px solid #dcdcde;
}

@media ( prefers-contrast: more ) {
	.pcrp-sso-button {
		border-width: 2px;
	}
}