/*----------------
	config
----------------*/
section.mailform {
	--form-text: #000;
	--form-text-light: #fff;
	--form-text-disable: #444;
	--form-accent: var(--color-accent2);
	--form-border: #ccd;
	--form-border-focus: #556;
	--form-background: #fff;
	--form-trailing: #aab;

	--form-button-border: transparent;
	--form-button-background-off: #ccc;
	--form-button-background-on: var(--color-accent2);
	--form-button-text-off: #fff;
	--form-button-text-on: #fff;
	--form-button-accent: var(--color-accent2);

	--form-toggle-background: #fff;
	--form-toggle-text-on: #fff;
	--form-toggle-text-off: #aaa;

	box-sizing: border-box;
}
/*----------------
	placeholder color
----------------*/
section.mailform {
	::-webkit-input-placeholder {
		color: #ccc;
		opacity: 1;
	}
	::-moz-placeholder {
		color: #ccc;
		opacity: 1;
	}
	:placeholder-shown {
		color: #ccc;
	}
}
/*----------------
	<div class="radioToggle">
		<div></div>
		<div>
			<label for="form_check1-1">NO<input type="radio" name="form_check1" value="NO" id="form_check1-1" style="display: none;" checked="checked"></label>
			<label for="form_check1-2">YES<input type="radio" name="form_check1" value="YES" id="form_check1-2" style="display: none;"></label>
		</div>
	</div>
----------------*/
section.mailform {
	div.radioToggle {
		user-select: none;
		width: 250px;
		padding: 3px;
		background-color: var(--form-toggle-background);
		border-radius: 50px;
		display: grid;
		&:has(> div:nth-of-type(2) > label:nth-of-type(2) > input[type="radio"][checked]) {
			> div:nth-of-type(1) {
				margin-left: 50%;
			}
			> div:nth-of-type(2) {
				> label {
					&:nth-of-type(1) {
						color: var(--form-toggle-text-off);
					}
					&:nth-of-type(2) {
						color: var(--form-toggle-text-on);
					}
				}
			}
		}
		> div {
			grid-area: 1/1/2/2;
			&:nth-of-type(1) {
				border-radius: 50px;
				background-color: var(--form-button-background-on);
				width: 50%;
				transition: margin 0.2s;
			}
			&:nth-of-type(2) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				> label {
					cursor: pointer;
					font-size: 15px;
					line-height: 1;
					font-weight: 600;
					padding: 12px;
					text-align: center;
					&:nth-of-type(1) {
						color: var(--form-toggle-text-on);
						transition: color 0.2s;
					}
					&:nth-of-type(2) {
						color: var(--form-toggle-text-off);
						transition: color 0.2s;
					}
				}
			}
		}
	}
}
/*----------------
	<span class="radio"><input type="radio"><label></label></span>
----------------*/
section.mailform {
	span.radio.ui {
		display: inline-block;
		background-color: var(--form-button-background-off);
		border: solid 1px var(--form-button-border);
		border-radius: 8px;
		height: 50px;
		&:has(> input[type="radio"]:checked) {
			background-color: var(--form-button-background-on);
			> label {
				color: var(--form-button-text-on);
			}
		}
		&:has(> input[type="radio"]:disabled) {
			cursor: not-allowed;
			> input {
				cursor: not-allowed;
			}
			> label {
				cursor: not-allowed;
			}
		}
		> input[type="radio"] {
			accent-color: var(--form-button-accent);
			cursor: pointer;
		}
		> label {
			display: inline-block;
			font-size: 0.9rem;
			line-height: 1;
			color: var(--form-button-text-off);
			padding: 15px 10px 0px 0;
			cursor: pointer;
			user-select: none;
			white-space: nowrap;
		}
	}
}
/*----------------
	<div class="checkbox"><input type="checkbox"><label></label></div>
----------------*/
section.mailform {
	div.checkbox.ui {
		user-select: none;
		appearance: none;
		box-sizing: border-box;
		background-color: var(--form-button-background-off);
		display: inline;
		white-space: nowrap;
		&:has(> input[type="checkbox"]:disabled) {
			cursor: not-allowed;
			> input {
				cursor: not-allowed;
			}
			> label {
				cursor: not-allowed;
			}
		}
		input {
			display: none;
			&:checked + label {
				background-color: var(--form-accent);
				border: solid 1px var(--form-accent);
				color: var(--form-text-light);
				background-image: url(../image/icon_check_fff.svg);
			}
		}
		label {
			display: inline-block;
			box-sizing: border-box;
			white-space: nowrap;
			height: 50px;
			font-size: 0.9rem;
			line-height: 1;
			color: var(--form-button-text-off);
			padding: 15px 13px 0 30px;
			background-color: transparent;   /*#f8f8f8;*/
			cursor: pointer;
			border: solid 1px var(--form-border);
			background-image: url(../image/icon_check_off.svg);
			background-repeat: no-repeat;
			background-position: 8px 45%;
		}
	}
}
/*----------------
	< class="checkboxmini"><div class="checkbox"><input type="checkbox"><label></label></div></>
----------------*/
section.mailform {
	.checkboxmini {
		user-select: none;
		> div.checkbox.ui {
			display: inline;
			font-size: 13px;
			line-height: 27px;
			white-space: nowrap;
			> label {
				color: #333;
				padding: 3px 10px;
				background-color: #eee;
				border: solid 1px #bbb;
				cursor: pointer;
			}
			> input[type="checkbox"] {
				display: none;
				&:checked + label {
					background-color: #57d;
					color: #fff;
				}
				&:disabled + label {
					background-color: #999;
					color: #ccc;
				}
			}
		}
	}
}
/*----------------
	<input type="button">
----------------*/
section.mailform {
	input[type="button"].ui {
		appearance: none;
		box-sizing: border-box;
		height: 42px;
		padding: 0 18px;
		border: solid 1px var(--form-accent2);
		border-radius: 3px;
		font-size: 1rem;
		line-height: 1;
		background-color: var(--form-background);
		color: var(--form-accent2);
		cursor: pointer;
	}
}
/*----------------
	<input type="***">
----------------*/
section.mailform {
	input[type="text"].ui,
	input[type="password"].ui,
	input[type="email"].ui,
	input[type="date"].ui,
	input[type="number"].ui,
	input[type="tel"].ui,
	input[type="file"].ui,
	select.ui {
		appearance: none;
		box-sizing: border-box;
		height: 50px;
		padding: 0 0 10px 10px;
		font-size: 1rem;
		line-height: 1;
		border: solid 1px var(--form-border);
		background-color: var(--form-background);
		color: var(--form-text);
		border-radius: 8px;
		&:focus {
			outline: 0;
			border: solid 1px var(--form-border-focus);
		}
		&:disabled {
			cursor: not-allowed;
			border: none;
			background-color: transparent;
			color: var(--form-text-disable);
			font-weight: bold;
		}
	}
	select.ui {
		padding: 0 0 10px 5px;
	}
	.trailing {
		color: var(--form-trailing);
	}
}
/*----------------
	<textarea>
----------------*/
section.mailform {
	textarea.ui {
		appearance: none;
		display: block;
		border-radius: 8px;
		padding: 5px 10px;
		font-size: 1rem;
		line-height: 1.5;
		border: solid 1px var(--form-border);
		background-color: var(--form-background);
		color: var(--form-text);
		margin: 0;
		&:focus {
			outline: 0;
			border: solid 1px var(--form-border-focus);
		}
		&:disabled {
			cursor: not-allowed;
			border: none;
			background-color: transparent;
			color: var(--form-text-disable);
			font-weight: bold;
		}
	}
}
/*----------------
	<button>
----------------*/
section.mailform {
	button.ui,
	a.ui,
	input[type="submit"].ui {
		user-select: none;
		white-space: nowrap;
		height: 50px;
		padding: 0 18px;
		border-radius: 3px;
		font-size: 0.9rem;
		line-height: 1;
		cursor: pointer;
		border: solid 1px var(--form-background);
		background-color: #eee;
		color: var(--form-trailing);
		&:hover {
			opacity: 0.7;
		}
		&:disabled {
			cursor: not-allowed;
			border: solid 1px #fff;
			opacity: 0.3;
		}
		&.right {
			padding: 0 50px 0 30px;
			background-image: url(../image/icon_chevron_right_aaa.svg);
			background-repeat: no-repeat;
			background-position: 95% 50%;
			@media (width < 420px) {
				padding: 0 25px 0 15px;
			}
		}
		&.left {
			padding: 0 30px 0 50px;
			background-image: url(../image/icon_chevron_left_aaa.svg);
			background-repeat: no-repeat;
			background-position: 5% 50%;
			@media (width < 420px) {
				padding: 0 15px 0 25px;
			}
		}
		&.highlight {
			color: #fff;
			background-color: var(--form-button-background-on);
		}
		&.right.highlight {
			background-image: url(../image/icon_chevron_right_fff.svg);
		}
		&.left.highlight {
			background-image: url(../image/icon_chevron_left_fff.svg);
		}
		&.small {
			border: solid 1px #aaa;
			padding: 4px 5px;
			margin: 0 1px;
			font-size: 13px;
		}
		&.mini {
			border: solid 1px #aaa;
			padding: 0;
			margin: 0 1px;
			cursor: pointer;
			font-size: 13px;
		}
		&.uimessage {
			appearance: none;
			background: linear-gradient(#ed7a61,#ed7a61);
			color: #fff;
			border: 0;
			padding: 5px 11px;
			font-size: 16px;
			cursor: default;
		}
	}
	a.ui {
		text-decoration: none;
		display: inline-flex;
		align-items: center;
	}
}
/*----------------
	<input type="range">
----------------*/
section.mailform {
	input[type="range"].ui {
		user-select: none;
		appearance: none;
		cursor: pointer;
		vertical-align: middle;
		border-style: none;
		padding: 3px;
		&:hover {
			background-color: var(--form-accent2);
			border-radius: 10px;
		}
	}
}