// Web component, used across Settings
ajax-form {
	display: block;
}

[data-tabs] + * {
	clear: both;
}

:where(.pwp-panel, ajax-form) {
	padding: min(5vw, 2rem);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	background: var(--color-light, #fff);
	--flow-space: initial; // reset inheritance
	> * {
		max-width: 55rem;
	}
	&:not(:last-child) {
		margin-bottom: 3rem;
	}

	:where(.pwp-panel__title, h2) {
		margin-bottom: 1.5rem;
		font-size: 1.25rem;
	}
	> .section-description {
		+ * {
			margin-top: 2rem;
		}
	}

	.form-table {

		p.description {
			word-break: initial;
			margin-top: 8px;
			&:first-child {
				margin-top: 0;
			}
		}
		th {
			padding-block: 15px; // Matching <td>
			width: 18ch; // Shorter than WP
			label {
				font-size: 1rem;
				text-wrap: balance;
			}
		}
	}
}

form {
	.cluster {
		--gap-width: 1rem;
	}
	.switcher {
		:where(.email,:has(input[type="email"])) {
			// Double the width point
			--threshold: 60rem;

			input[type="email"] {
				width: 100%;
			}
		}
	}
	label {
		display: block;
		a:not(:hover,:focus-within) {
			color: var(--color-secondary);
		}
	}

	:is(input[type="text"],
		input[type="number"],
		input[type="email"],
		input[type="password"],
		select,
		textarea) {
		border-color: var(--color-mid-glare);
		width: min(100%, var(--max-input-width, 40rem));
		min-height: 2.625rem;
		max-width: unset;
	}

	input.search-icon {
		background-image: url('../img/search-icon.svg') !important;
		background-repeat: no-repeat;
		background-position: center left 8px;
		padding-left: 40px !important;
	}
	.field-error {
		input,
		textarea {
			border-color: #d00;
		}
	}
	.input-error {
		font-size: 75%;
		color: #d00;
	}
	.actions {
		display: flex;
		gap: .5em;
		align-items: flex-start;
	}
}