/**
 * Aayati SSO — the sign-in button, on wp-login.php and wherever the shortcode puts it.
 *
 * Kept tiny and token-driven so a theme can restyle it with one custom property.
 * The geometry matches the login form's own submit button — same radius, same
 * height, same default blue — so the SSO button reads as part of the screen
 * rather than as something a plugin bolted on. Providers that carry a brand
 * colour override only the background, through --aysso-button-bg.
 *
 * The same sheet dresses the shortcode, which is why width is not in the base
 * rule: on wp-login.php the button is the primary action and matches the submit
 * button's full width, but stretched across a page's content column it stops
 * reading as a button at all. In content it sizes to its label.
 */

.aysso-login-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 18px;
}

.aysso-login-block--above,
.aysso-login-block--below { align-items: stretch; }

.aysso-login-block--above .aysso-button,
.aysso-login-block--below .aysso-button {
	display: block;
	width: 100%;
}

/*
 * "Above" is rendered through core's `login_message` filter, so it lands
 * between the logo and the form card rather than inside it. The negative
 * bottom margin eats part of the card's own 24px top margin, which is what
 * keeps the divider reading as a join between the two halves instead of as a
 * stray rule floating in the gap. `.login *` resets every margin, so these
 * rules have to name the class to outweigh it.
 */
.login .aysso-login-block--above { margin: 24px 0 -12px; }
.login .aysso-login-block--below { margin: 4px 0 18px; }

/* The "or" between the two ways in. A flex item, so the rules either side of
   the word stretch to whatever width the button block happens to be. */
.aysso-login-block__or {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #646970;
	font-size: 12px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.aysso-login-block__or::before,
.aysso-login-block__or::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #dcdcde;
}

.aysso-button {
	display: inline-block;
	max-width: 100%;
	padding: 10px 14px;
	border-radius: 3px;
	background: var(--aysso-button-bg, #2271b1);
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	box-sizing: border-box;
	transition: filter .12s ease;
}

.aysso-button:hover,
.aysso-button:focus {
	color: #fff;
	filter: brightness(.92);
}

.aysso-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.aysso-button--ghost {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
}

.aysso-button--ghost:hover,
.aysso-button--ghost:focus { color: inherit; }