/*
 * Logging in: the quick ways in on the log-in card (Google, Apple, a passkey) and on WordPress's
 * own log-in page, and the "Ways to log in" panel on My Account → Account details and the profile
 * page. The Google and Apple buttons follow their makers' guidelines: Google's white with its
 * four-colour mark, Apple's black with its logo in white.
 */

.gl-sign-in-with {
	margin: 0 0 1.5rem;
}

.gl-sign-in-with__buttons {
	display: grid;
	gap: 0.75rem;
}

.gl-sign-in-with__buttons form {
	margin: 0;
}

.gl-sign-in-with .gl-sign-in-with__button,
.gl-passkey-login .gl-sign-in-with__button {
	align-items: center;
	border-radius: 6px;
	box-shadow: none;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	font-weight: 500;
	gap: 0.75rem;
	justify-content: center;
	letter-spacing: normal;
	line-height: 1.2;
	min-height: 48px;
	padding: 0.5rem 1rem;
	text-decoration: none;
	text-transform: none;
	width: 100%;
}

.gl-sign-in-with .gl-sign-in-with__button--google {
	background-color: #fff;
	border: 1px solid #747775;
	color: #1f1f1f;
	font-family: Roboto, Arial, sans-serif;
}

.gl-sign-in-with .gl-sign-in-with__button--google:hover,
.gl-sign-in-with .gl-sign-in-with__button--google:focus-visible {
	background-color: #f7f8f8;
	border-color: #1f1f1f;
}

.gl-sign-in-with .gl-sign-in-with__button--apple {
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.gl-sign-in-with .gl-sign-in-with__button--apple:hover,
.gl-sign-in-with .gl-sign-in-with__button--apple:focus-visible {
	background-color: #1f1f1f;
}

.gl-sign-in-with .gl-sign-in-with__button--passkey,
.gl-passkey-login .gl-sign-in-with__button--passkey {
	background-color: #fff;
	border: 1px solid currentColor;
	color: var(--go--color--primary, #165144);
	font-family: inherit;
}

.gl-sign-in-with .gl-sign-in-with__button--passkey:hover,
.gl-sign-in-with .gl-sign-in-with__button--passkey:focus-visible,
.gl-passkey-login .gl-sign-in-with__button--passkey:hover,
.gl-passkey-login .gl-sign-in-with__button--passkey:focus-visible {
	background-color: #eef6f4;
}

.gl-sign-in-with__logo {
	flex: 0 0 auto;
}

/* "or", between the quick ways in and the email box. */
.gl-sign-in-with__or {
	align-items: center;
	color: #4b5a53;
	display: flex;
	font-size: 0.9rem;
	gap: 1rem;
	margin: 1.5rem 0 0;
}

.gl-sign-in-with__or::before,
.gl-sign-in-with__or::after {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	content: "";
	flex: 1 1 auto;
}

.gl-passkeys__message {
	font-size: 0.95rem;
	margin: 0.5rem 0 0;
}

.gl-passkeys__message:empty {
	display: none;
}

/* WordPress's own log-in page. */
.login .gl-passkey-login {
	clear: both;
	margin: 0 0 16px;
}

.login .gl-passkey-login .gl-sign-in-with__or {
	margin: 0 0 16px;
}

/* My Account → Account details: the ways to log in. */
.gl-sign-in-options {
	margin-top: 3rem;
}

.gl-sign-in-options__row {
	align-items: start;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	display: grid;
	gap: 0.5rem 1rem;
	grid-template-columns: 24px minmax(0, 1fr);
	padding: 1.25rem 0;
}

.gl-sign-in-options__row > .gl-sign-in-with__logo {
	margin-top: 0.2rem;
}

.gl-sign-in-options__row > form {
	grid-column: 2;
	margin: 0;
}

.gl-sign-in-options__what,
.gl-sign-in-options__what p {
	margin: 0;
}

.gl-passkeys__list {
	list-style: none;
	margin: 0.75rem 0 1rem;
	padding: 0;
}

.gl-passkeys__item {
	align-items: baseline;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	padding: 0.5rem 0;
}

.gl-passkeys__when {
	color: #4b5a53;
	font-size: 0.9rem;
}

.gl-passkeys__remove {
	margin-left: auto;
}

.gl-passkeys__none {
	margin: 0.75rem 0 1rem;
}

/* Google and Apple keep their capitals on the site's lower-case buttons (the theme's button rule
   is body.woocommerce-page .button, so this needs the extra class to win). */
.gl-sign-in-options .button.gl-sign-in-options__action {
	text-transform: none;
}