/* ABAU-2027 — the Facebook and Google authentication buttons.
 *
 * Markup: base/includes/social-auth-buttons.php. Loaded site-wide from base/header.php, because
 * the buttons appear in the sign-in modal that base/footer.php puts on every page, not only in
 * checkout.
 *
 * These replace two PNGs whose label text was baked into the pixels. The old pair could not be
 * made to match: fblogin.png was a 573x99 SQUARE button and theme.css shaved its corners off with
 * border-radius:25px to imitate the pill shape googlelogin.png already had, which is why they
 * always looked like two different buttons.
 *
 * Colours are each provider's published specification, not an approximation:
 *   Meta   #1877F2 — https://developers.facebook.com/docs/facebook-login/userexperience/
 *   Google light button: #FFFFFF fill, #747775 1px stroke, #1F1F1F text
 *          — https://developers.google.com/identity/branding-guidelines
 *
 * Two deliberate, recorded deviations, both noted on ABAU-2027:
 *   - Google specifies Google Sans Medium. That face is not licensed for third-party web use, so
 *     the buttons inherit the site face. Meta explicitly leaves the font to the implementer.
 *   - Google's spec asks for 12px before the logo, 10px after it and 12px after the text. The
 *     buttons here are centred rather than left-aligned so the pair reads as one control group,
 *     so the 10px logo-to-text gap is honoured exactly and the end padding is symmetric.
 *   - Both buttons are capsules. That is what the site serves today (theme.css rounded the
 *     button images to 25px) and keeping it avoids shipping a shape change nobody asked for on
 *     top of everything else here.
 */

.social-auth {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	/* The sign-in modal drops this straight into a flex .modal-footer, where an auto-width flex
	   item would collapse instead of laying its own children out. */
	width: 100%;
}

.social-auth__button {
	/* Grow to share the row, drop to stacked full-width rows when there is no room for two. This
	   is what replaces the Bootstrap col-md-6 the checkout copy used and the bare inline images
	   the modal copy used — one behaviour instead of two.

	   The minimum is the button's own single-line width rather than a guessed pixel value. With a
	   fixed basis the labels broke mid-phrase in the narrower sign-in modal ("Continue with" on
	   one line, "Facebook" on the next), and any number chosen here would only be right for one
	   of the two contexts and one font size. `max-content` is measured from the content, so the
	   pair stacks when a guessed value would instead have wrapped the text. */
	flex: 1 1 auto;
	min-width: -webkit-max-content;
	min-width: max-content;
	max-width: 320px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Google's specified logo-to-text gap. */
	gap: 10px;
	min-height: 44px;
	/* Roomier ends than Google's specified 12px, because a capsule needs the horizontal breathing
	   space or the label crowds the curve. */
	padding: 10px 22px;
	border: 1px solid transparent;
	/* A capsule, matching the current live appearance: theme.css put border-radius:25px on images
	   about 52px tall, so both buttons already read as pills to anyone using the site today. A
	   large fixed radius rather than 25px so it stays a true capsule at whatever height the label
	   and font size produce, instead of going subtly rectangular when the button is taller. */
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
}

.social-auth__button:hover,
.social-auth__button:focus {
	text-decoration: none;
}

/* :focus, not :focus-visible — this has to be visible on the older Safari this codebase still
   supports, where :focus-visible is not recognised and the whole rule would be dropped. */
.social-auth__button:focus {
	outline: 2px solid #1a73e8;
	outline-offset: 2px;
}

/* The icon box is a fixed square and the mark is never stretched: both SVGs keep their own
   aspect ratio inside it (the "f" is a tall glyph, the "G" is near-square), which is what both
   providers require of their logo. */
/* Belt and braces with the max-content minimum above: if a context ever squeezes the button
   below its natural width, the label must clip rather than break into a second line — a
   two-line "Continue with / Facebook" reads as two separate things. */
.social-auth__label {
	white-space: nowrap;
}

.social-auth__icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.social-auth__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.social-auth__button--facebook {
	background-color: #1877f2;
	border-color: #1877f2;
	/* The "f" is drawn with fill="currentColor" so it takes this. */
	color: #ffffff;
}

.social-auth__button--facebook:hover,
.social-auth__button--facebook:focus {
	background-color: #166fe0;
	border-color: #166fe0;
	color: #ffffff;
}

.social-auth__button--google {
	background-color: #ffffff;
	border-color: #747775;
	color: #1f1f1f;
}

.social-auth__button--google:hover,
.social-auth__button--google:focus {
	background-color: #f7f8f8;
	border-color: #747775;
	color: #1f1f1f;
}