/*----------------
	config
----------------*/
section.mailform {
	--form-text: #000;
	--form-text-light: #fff;
	--form-text-disable: #444;
	--form-accent: var(--color-accent);
	--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-accent);
	--form-button-text-off: #fff;
	--form-button-text-on: #fff;
	--form-button-accent: var(--color-accent);

	box-sizing: border-box;
}
/*----------------
	placeholder color
----------------*/
section.mailform {
	::-webkit-input-placeholder {
		color: #ddd;
		opacity: 1;
	}
	::-moz-placeholder {
		color: #ddd;
		opacity: 1;
	}
	:placeholder-shown {
		color: #ddd;
	}
}
/*----------------
	<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 2px var(--form-button-border);
		border-radius: 3px;
		height: 40px;
		&: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: 10px 10px 11px 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;
			font-size: 0.9rem;
			line-height: 1;
			color: var(--form-focus-border);
			padding: 10px 13px 10px 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 2px var(--form-accent);
		border-radius: 3px;
		font-size: 1rem;
		line-height: 100%;
		background-color: var(--form-background);
		color: var(--form-accent);
		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: 42px;
		padding: 0 0 10px 10px;
		font-size: 1rem;
		line-height: 100%;
		border: solid 2px var(--form-border);
		background-color: var(--form-background);
		color: var(--form-text);
		border-radius: 3px;
		&:focus {
			outline: 0;
			border: solid 2px 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: 3px;
		padding: 5px 10px;
		font-size: 1rem;
		line-height: 1.5;
		border: solid 2px var(--form-border);
		background-color: var(--form-background);
		color: var(--form-text);
		margin: 0;
		&:focus {
			outline: 0;
			border: solid 2px 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: 42px;
		padding: 0 18px;
		border-radius: 3px;
		font-size: 0.9rem;
		line-height: 1;
		cursor: pointer;
		border: solid 2px var(--form-background);
		background-color: #eee;
		color: var(--form-trailing);
		&:hover {
			opacity: 0.7;
		}
		&:disabled {
			cursor: not-allowed;
			border: solid 2px #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-accent);
			border-radius: 10px;
		}
	}
}