/**
 * Styles for the [thp_settings] front-end settings form.
 *
 * File Name:     settings-form.css
 * Version:       1.0.0
 * Last Modified: 2026-09-21
 * Package:       TheHomepageExtensions / Assets
 */

.thp-settings-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-inline-size: 32rem;
	margin-block: var(--wp--preset--spacing--40, 2rem);
	padding: var(--wp--preset--spacing--30, 1.5rem);
	border: 1px solid #ddd;
	border-radius: 8px;

	& .thp-settings-form__notice {
		margin: 0;
		padding: 0.5rem 0.75rem;
		background-color: #e6f4ea;
		color: #1e4620;
		border-radius: 4px;
	}

	& .thp-settings-form__label {
		font-weight: 600;
	}

	& .thp-settings-form__input {
		padding: 0.5rem 0.75rem;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 1rem;
	}

	& .thp-settings-form__submit {
		align-self: flex-start;
		padding: 0.5rem 1.25rem;
		background-color: #e53927;
		color: #ffffff;
		border: none;
		border-radius: 4px;
		font-weight: 600;
		cursor: pointer;
	}

	& .thp-settings-form__submit:hover,
	& .thp-settings-form__submit:focus-visible {
		background-color: #c22120;
	}
}