/**
 * The "Sign in with ..." buttons on wp-login.php.
 *
 * Each provider's colors, font and logo follow its own branding guidelines:
 * Google: https://developers.google.com/identity/branding-guidelines
 * Microsoft: https://learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps
 */

.lxb_login-sign_in {
	margin: 0 0 20px;
}

.lxb_login-sign_in-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border-radius: 4px;
	text-decoration: none;
}

/* Stacked, when there's more than one provider. */
.lxb_login-sign_in-button + .lxb_login-sign_in-button {
	margin-top: 12px;
}

.lxb_login-sign_in-button:focus-visible {
	outline: 2px solid #C23A3E;
	outline-offset: 2px;
}

.lxb_login-sign_in-google {
	background: #ffffff;
	border: 1px solid #747775;
	color: #1f1f1f;
	font-family: Roboto, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
}

.lxb_login-sign_in-google:hover,
.lxb_login-sign_in-google:focus {
	background: #f2f2f2;
	color: #1f1f1f;
}

/* Microsoft's light theme. */
.lxb_login-sign_in-microsoft {
	background: #ffffff;
	border: 1px solid #8c8c8c;
	color: #5e5e5e;
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.lxb_login-sign_in-microsoft:hover,
.lxb_login-sign_in-microsoft:focus {
	background: #f3f3f3;
	color: #5e5e5e;
}

/* An "or" between the buttons and the password form, with a rule either side. */
.lxb_login-sign_in-or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
	color: #757575;
	font-size: 13px;
}

.lxb_login-sign_in-or::before,
.lxb_login-sign_in-or::after {
	content: '';
	flex: 1;
	border-top: 1px solid #dbdbdb;
}

/* The LexBlog-branded form insets its fields by 40px. */
.lxb_login-login_page .lxb_login-sign_in {
	margin: 0 40px;
}