.lwa-passkey-login {
	clear: both;
	padding: 10px 0;
	width:  100% !important;

	.lwa-hr {
		margin-top : 0px;
	}

	button.lwa-passkey-button-login {
		width : 100% !important;
		float : none !important;
	}
	&.hidden {
		display : none !important;
		visibility : hidden !important;
		opacity : 0 !important;
	}

	.not-fully-supported, .not-supported {
		background-color: #fff3cd;
		border: 1px solid #e9d9a7;
		color: #856404;
		padding: 15px;
		margin : 10px 0;
	}
}

// Create SCSS that formats the output from LoginWithAjax\Passkeys\Account::show_profile_fields() into a table using CSS grids.
// The table should have two columns, the first column should be the labels (including editable field) or descriptions, and the second column should be the action buttons.
// add a style similar to the tables in github.com
// Path: wp-content/plugins/login-with-ajax-pro/add-ons/passkeys/passkeys.scss
.lwa.lwa-passkeys-editor {
	display: block;
	box-sizing: border-box;
	margin: 12px 0 30px !important;
	width: 100%;
	max-width: 800px;
	padding: 0 !important;
	text-decoration: none !important;
	background-color: #fff !important;
	border-radius: 4px !important;
	border: 1px solid var(--border-color) !important;

	button.button {
		margin: 0 !important;
	}

	header {
		display: grid;
		grid-template-columns: 1fr min-content;
		grid-gap: 10px;
		padding: 10px 15px;
		border-bottom : 1px solid var(--border-color);
		background-color : #f6f8fb;
		align-items : center;

		> div:first-child {
			font-weight: bold;
			font-size: 16px;
		}

		.passkeys-description {
			font-size: 12px;
			color: #777;
			font-style: italic;
			grid-column-start: 1;
			grid-column-end: 3;
		}
	}

	.lwa-passkeys {
		margin : 0 !important;

		li {
			display: grid;
			box-sizing: border-box;
			width: 100%;
			grid-template-rows: 1fr;
			padding: 20px 15px;
			margin: 0;

			&:not(.no-passkeys) {
				border-bottom : 1px solid var(--border-color);
			}

			&:last-child {
				border-bottom : none;
			}

			.passkey-view {
				display: grid;
				box-sizing: border-box;
				width: 100%;
				grid-template-columns: 30px 1fr max-content;
				grid-gap: 10px;
				transition: opacity 0.3s ease-in-out;

				&.passkey-editor {
					grid-template-columns: 1fr max-content;
				}

				.passkey-label {
					font-weight: bold;
					font-size: 16px;
					margin-bottom: 10px;
				}
				.passkey-history, em, .passkey-domain {
					color : #777;
					font-size: 14px;
				}

				svg {
					max-width: 30px;
				}

				.passkey-actions {
					button {
						height: auto !important;
						padding: 8px 10px !important;
						line-height: 16px !important;
						vertical-align: top;
						svg {
							width : 20px;
							height : 20px;
							pointer-events: none;
						}
					}
				}
			}
		}

		&[data-multidomain="0"] {
			.passkey-domain {
				display:none;
				visibility : hidden;
			}
		}
	}

}

.lwa-2FA-setup .lwa-2FA-method[data-method="passkeys"] {
	border : none !important;
	padding: 0 !important;
	background: transparent !important;

	header {
		padding: 0 !important;
		background : none !important;
		.lwa-2FA-method-title {
			box-sizing: border-box;
			background-size: 30px;
			background-repeat: no-repeat;
			background-position: left top;
			background-image: var(--2FA-icon);
			padding-left: 40px;
			align-items: center !important;
			margin-bottom: 10px;

			> div:first-child {
				font-size: 20px !important;
				font-weight: normal !important;
			}
		}
		.lwa-2FA-method-desc {
			width: 100%;
			text-align: justify;
			margin: 15px 0;
			font-size: 14px;
			color: #555;
		}
	}
	footer {
		padding: 0 !important;
		margin: 25px 0 0 0 !important;

		header {
			background: #f6f8fb !important;
			padding: 10px 15px !important;
		}
	}

	.lwa-passkeys-editor {
		margin-bottom : 0 !important;
	}
}

#profile-page {
	.lwa-2FA-setup {
		margin-top : 30px;
		font-size: 13px;

		.lwa-2FA-method {
			font-size: var(--base-font-size);
		}

		.lwa-2FA-method:last-child {
			margin-bottom: 30px;
		}

		.lwa-2FA-method-title {
			font-weight: bold;
		}

		h4 { /* mimic WP admin area */
			color: #1d2327;
			font-size: 1.3em !important;
			margin: 1em 0;
			font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
			font-weight : bold !important;
		}
	}
}

.bp-wrap, .woocommerce {
	.lwa.lwa-passkey-login {
		font-family: inherit !important;
	}
}

body.login #loginform {
	.lwa.lwa-passkey-login {
		padding : 20px 0 0;
	}
}