/* WP Social plugin's "Login with Google" button in Blocksy's account modal
 * (rendered by the plugin's own login_form hook, template/login/screens/
 * default.php style-1 markup) ships a hardcoded white pill with a brand-
 * colored icon/label and left-aligned content - it doesn't match the flat,
 * centered, theme-colored "Log In" .ct-button submit right below it.
 *
 * Restyled with Blocksy's own --theme-button-* custom properties instead of
 * hardcoded colors, so it automatically re-themes if the Customizer accent
 * color or button typography ever changes.
 */
/* Match WooCommerce's native Log In / Register submit buttons to the
 * full-width Google button below them, instead of their default
 * content-sized width. */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	width: 100%;
}

#xs-social-login-container {
	max-width: none;
	margin: 10px 0;
}

#xs-social-login-container .xs-login--style-1 .xs-login__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--theme-button-min-height);
	padding: var(--theme-button-padding);
	border: var(--theme-button-border);
	border-radius: var(--theme-button-border-radius, 3px);
	background-color: var(--theme-button-background-initial-color);
	box-shadow: none;
}

#xs-social-login-container .xs-login--style-1 .xs-login__item:hover {
	background-color: var(--theme-button-background-hover-color);
}

#xs-social-login-container .xs-login--style-1 .xs-login__item--icon {
	width: auto;
	height: auto;
	line-height: normal;
	background-color: transparent;
	color: var(--theme-button-text-initial-color);
	font-size: 16px;
}

#xs-social-login-container .xs-login--style-1 .xs-login__item--label {
	color: var(--theme-button-text-initial-color);
	font-family: var(--theme-button-font-family, var(--theme-font-family));
	font-size: var(--theme-button-font-size);
	font-weight: var(--theme-button-font-weight);
	line-height: var(--theme-button-line-height);
	padding-left: 8px;
	text-align: center;
}

#xs-social-login-container .xs-login--style-1 .xs-login__item:hover .xs-login__item--icon,
#xs-social-login-container .xs-login--style-1 .xs-login__item:hover .xs-login__item--label {
	color: var(--theme-button-text-hover-color);
	background-color: transparent;
}