.snow-monkey-form {
	--color--required: var(--wp--preset--color--primary);
	width: min(600px, 100%);
	margin-inline: auto;

	.smf-item {
		&:not(:first-of-type) {
			margin-block-start: var(--wp--preset--spacing--40);
		}

		/* 必須項目は事前に太枠 */
		&:has([data-validations*="required"]) {
			.smf-item__label {
				.smf-item__label__text {
					&::after {
						content: "必須";
						font-size: var(--wp--preset--font-size--small);
						padding: 0.1rem 0.5rem;
						background-color: var(--color--required);
						color: #fff;
						margin-inline-start: 0.5rem;
						border-radius: 0.2rem;
					}
				}
			}
		}

		/* バリデーションに失敗したら赤枠 */
		&:has(.smf-error-messages) {
			:where(input, textarea) {
				border: 2px solid red;
				background-color: rgb(255 0 0 / 0.05);
			}
		}
	}

	/* フォームのパーツのスタイル */
	.smf-form {
		font-size: var(--wp--preset--font-size--medium);

		:where(input, textarea) {
			box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.2);
			border: 1px solid var(--wp--preset--color--alto-10);
			background-color: var(--wp--preset--color--alto-03);
			&::placeholder {
				opacity: 0.2;
			}
		}

		textarea {
			line-height: 1.5;
			field-sizing: content;
			min-height: 10lh;
			background-color: var(--wp--preset--color--alto-03);
		}

		/* フォームの見出し */
		.smf-item__label {
			.smf-item__label__text {
				font-variation-settings: "wght" 600;
				font-weight: 600;
			}
		}

		/* テキスト入力 */
		.smf-text-control {
			.smf-text-control__control {
				width: min(100%, 400px);
			}
		}

		/* ラジオボタン */
		.smf-radio-button-control {
			display: flex;
			align-items: center;
			.smf-radio-button-control__control {
				margin-block-start: 0;
			}
		}
	}

	/* 送信ボタン */
	.smf-action {
		display: flex;
		justify-content: center;
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.smf-button-control {
		width: 100%;
		.smf-button-control__control {
			appearance: none;
			border-radius: 0;
			background-image: initial;
			background-color: var(--wp--preset--color--primary);
			color: #fff;
			width: 100%;
			border: 1px solid var(--wp--preset--color--primary);
			font-size: var(--wp--preset--font-size--large);
			border-radius: 0.3rem;
			transition: 0.3s ease background-color;
			text-align: center;
			&:hover {
				background-color: #fff;
				color: var(--wp--preset--color--primary);
			}
		}
	}
}