/**
 * Pulsante "Accedi con Google" - pagina di login e frontend.
 *
 * Due varianti:
 * - google (predefinita): colori e font delle linee guida di branding Google,
 *   indipendenti dal tema. WCAG 2.1 AA.
 * - theme: aspetto dato dalle classi pulsante del tema (shortcode button_class)
 *   o, senza classi, dal colore dei link del contesto.
 *
 * Le regole sono prefissate con .dbgsso-wrap: i temi colorano spesso i link di
 * un'area con selettori come ".access-login a" (specificita' 0,1,1), che
 * battevano ".dbgsso-btn" (0,1,0) e rendevano il testo invisibile.
 */

.dbgsso-wrap { margin: 16px 0 8px; }

.dbgsso-sep {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
	color: #646970;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.dbgsso-sep::before,
.dbgsso-sep::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #dcdcde;
}

.dbgsso-wrap .dbgsso-btn {
	display: block;
	text-decoration: none;
}

.dbgsso-wrap .dbgsso-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.dbgsso-btn__icon { flex: 0 0 18px; }

/* Variante google */

.dbgsso-wrap .dbgsso-btn--google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 16px;
	background: #fff;
	color: #1f1f1f;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	border: 1px solid #747775;
	border-radius: 6px;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.dbgsso-wrap .dbgsso-btn--google:hover,
.dbgsso-wrap .dbgsso-btn--google:focus {
	background: #f2f2f2;
	color: #1f1f1f;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.dbgsso-wrap .dbgsso-btn--google:focus-visible { outline-color: #1d4ed8; }

/* Variante theme: il link resta un contenitore neutro e lo span interno porta
   le classi del tema (es. "btn btn-primary"), fuori dalla portata delle regole
   del tema sui link. */

.dbgsso-wrap .dbgsso-btn__face {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

/* Senza classi del tema: contorno e testo nel colore dei link del contesto. */
.dbgsso-wrap .dbgsso-btn__face--plain {
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid currentColor;
	border-radius: 6px;
	transition: background-color .15s ease;
}

.dbgsso-wrap .dbgsso-btn--theme:hover .dbgsso-btn__face--plain {
	background-color: rgba(127, 127, 127, .15);
}

/* Il logo Google resta su fondo bianco con qualunque colore del tema. */
.dbgsso-btn--theme .dbgsso-btn__icon {
	box-sizing: content-box;
	padding: 3px;
	background: #fff;
	border-radius: 50%;
}

.dbgsso-classic {
	margin: 12px 0 0;
	text-align: center;
	font-size: 13px;
}

.dbgsso-error { margin-top: 14px; }

@media (prefers-color-scheme: dark) {
	.dbgsso-sep { color: #a7aaad; }
}