:root {
	--ff-auth-logo-size: 320px;
	--ff-auth-background-brightness: 50%;
}

.ff-auth {
	&__default-form {
		max-width: 400px;
		margin: 0 auto;
		width: 100%;
		@apply py-8;
		@apply px-4;
	}

	&__form-title {
		@apply text-2xl xl:text-3xl font-semibold tracking-wide text-gray-800 dark:text-white mb-8;
	}
}

.ff-social-button {
	border-radius: 4px;
	padding: 12px 16px;
	border: 0;
	appearance: none;
	margin-bottom: 16px;
	width: 100%;
	display: flex;
	align-items: center;

	span {
		@apply text-sm;
	}

	&:last-child {
		margin-bottom: 0;
	}

	img {
		width: 20px;
		height: auto;
		margin-right: 16px;
	}

	&--facebook {
		background: #1877f2;
		color: white;
	}

	&--apple {
		background: black;
		color: white;
		@apply dark:border dark:border-solid dark:border-gray-600;
	}

	&--google {
		background: white;
		@apply border border-solid border-gray-300 dark:border-transparent;
	}
}