.oneauto-social-login {
	width: 270px;
	height: 44px;
	margin: 32px auto 0;
	position: relative;
}

/* =========================================================
   Visible custom button
   ========================================================= */

.oneauto-google-btn {
	width: 270px;
	height: 44px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 0;

	border: 1px solid rgba(13, 83, 197, 0.42);
	border-radius: 10px;

	background: #ffffff;
	color: #1f2937;

	font: 600 14px/1 Arial, sans-serif;

	cursor: pointer;

	overflow: hidden;

	box-shadow:
		0 4px 12px rgba(13, 83, 197, 0.08);

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		border-color .18s ease,
		background-color .18s ease;
}

/* =========================================================
   Hover animation
   IMPORTANT:
   Hover parent because iframe sits on top
   ========================================================= */

.oneauto-social-login:hover .oneauto-google-btn {
	background: #f8fbff;

	border-color: #0D53C5;

	box-shadow:
		0 0 0 3px rgba(13,83,197,.12),
		0 12px 24px -12px rgba(13,83,197,.45);

	transform: translateY(-2px) scale(1.03);
}

/* =========================================================
   Press animation
   ========================================================= */

.oneauto-social-login:active .oneauto-google-btn {
	transform: translateY(0) scale(.985);

	box-shadow:
		0 6px 16px -10px rgba(13,83,197,.35);
}

/* =========================================================
   G icon
   ========================================================= */

.oneauto-google-icon {
	color: #0D53C5;

	font-weight: 700;
	font-size: 18px;
	line-height: 1;

	flex-shrink: 0;

	transition: transform .18s ease;
}

.oneauto-social-login:hover .oneauto-google-icon {
	transform: scale(1.12);
}

/* =========================================================
   Invisible real Google layer
   ========================================================= */

#oneauto-google-login {
	position: absolute;
	top: 0;
	left: 0;

	width: 270px;
	height: 44px;

	opacity: 0.001;

	z-index: 3;

	cursor: pointer;

	overflow: hidden;

	border-radius: 10px;
}

/* Google injected wrapper */
#oneauto-google-login > div {
	width: 270px !important;
	height: 44px !important;

	overflow: hidden !important;

	border-radius: 10px;
}

/* Google iframe */
#oneauto-google-login iframe {
	position: relative !important;

	left: -10px !important;
	top: -2px !important;

	width: 290px !important;
	height: 48px !important;

	display: block !important;

	border: 0 !important;
}