/* auth-buttons: third-party sign-in buttons.
   Sanctioned exception file: Google, Apple, Microsoft, and Yahoo branding
   guidelines require these exact colors, so raw hex is allowed here and
   nowhere else. Do not reuse these values outside this file. */

.auth-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
	max-width: 20rem;
	margin-inline: auto;

	> a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);
		height: 2.75rem;
		border-radius: var(--border-radius);
		text-decoration: none;

		> svg {
			width: 1.125rem;
			height: 1.125rem;
			flex: none;
		}
	}

	> .auth-google {
		background: #FFFFFF;
		color: #1F1F1F;
		border: 1px solid #747775;
	}

	> .auth-apple {
		background: #000000;
		color: #FFFFFF;

		> svg {
			fill: #FFFFFF;
		}
	}

	> .auth-microsoft {
		background: #FFFFFF;
		color: #5E5E5E;
		border: 1px solid #8C8C8C;
	}

	> .auth-yahoo {
		background: #5F01D1;
		color: #FFFFFF;
	}
}

/* brand-mandated dark variants; Yahoo purple is used on both schemes */
@media (prefers-color-scheme: dark) {
	.auth-buttons {
		> .auth-google {
			background: #131314;
			color: #E3E3E3;
			border-color: #8E918F;
		}

		> .auth-apple {
			background: #FFFFFF;
			color: #000000;

			> svg {
				fill: #000000;
			}
		}

		> .auth-microsoft {
			background: #2F2F2F;
			color: #FFFFFF;
			border-color: #2F2F2F;
		}
	}
}