/* ------------------------------
 フォーム
------------------------------- */

/* ---------------
 フォーム 基本設定
--------------- */

button,
input,
select,
textarea {
	margin: 0;
	@include box-sizing(border-box);
}

// ボタン
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="checkbox"],
input[type="radio"],
select {
	cursor: pointer;
}

// テキストエリア
textarea {
	overflow: auto;
	vertical-align: top;
}

// ラベル
label {
	display: inline-block;
}

// ---------------
// フォーム 見栄え
// ---------------
.acms-form {
	input[type="text"],
	input[type="password"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="date"],
	input[type="month"],
	input[type="time"],
	input[type="week"],
	input[type="number"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"] {
		@include font-size(16);
		padding: 14px 5px 10px 5px;
		color: #333;
		line-height: 1;
		vertical-align: middle;
		background: #FBFBFB;
		border: $acms-form-border;
		border-radius: 3px;
		box-shadow: $acms-form-box-shadow;
		transition: background-color .2s;
		&:hover {
			background: #FFF;
			border-color: $acms-form-hover-border-color;
		}
		&:focus {
			background: #FFF;
			outline: none;
			border-color: $acms-form-focus-border-color;
			box-shadow: $acms-form-focus-box-shadow, $acms-form-box-shadow;
		}
		&:disabled {
			border-color: $acms-form-disabled-border-color;
			background-color: $acms-form-disabled-bg-color;
			color: $acms-form-disabled-text-color;
			cursor: not-allowed;
		}

		// ---------------
		// サイズ
		// ---------------
		// フォームサイズ 大
		&.acms-form-large {
			height: 48px;
			@include font-size(20);
		}
		// フォームサイズ 小
		&.acms-form-small {
			@include font-size(11);
		}
	}
	// iOS Safari用
	input[type="search"] {
		-webkit-appearance: none;
	}
	textarea,
	.entryFormLiteEditor {
		@include font-size(16);
		padding: 5px 5px 4px;
		background: #FBFBFB;
		border: $acms-form-border;
		border-radius: 3px;
		color: #333;
		line-height: 1.7;
		resize: vertical;
		overflow: auto;
		box-shadow: $acms-form-box-shadow;
		transition: background-color .2s;
		&:hover {
			background: #FFF;
			border-color: $acms-form-hover-border-color;
		}
		&:focus {
			background: #FFF;
			outline: none;
			border-color: $acms-form-focus-border-color;
			box-shadow: $acms-form-focus-box-shadow, $acms-form-box-shadow;
		}
		&:disabled {
			border-color: $acms-form-disabled-border-color;
			background-color: $acms-form-disabled-bg-color;
			color: $acms-form-disabled-text-color;
			cursor: not-allowed;
		}
		&.acms-form-large {
			height: 48px;
			@include font-size(20);
			vertical-align: middle;
		}
		&.acms-form-small {
			height: 20px;
			@include font-size(10);
		}
	}
	.entryFormLiteEditor img {
		max-width: 100%;
	}
	// テキスト系入力欄のプレースホルダー
	input[type="text"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="tel"],
	input[type="email"],
	textarea {
		@include placeholder($color: #AAA);
	}
	select {
		@include select( $border-radius: 3px, $background-color: $acms-form-select-bg-color, $background-color-hover:$acms-form-select-bg-color);
		text-align: left;
		&:focus {
			outline: none;
			border-color: $acms-form-focus-border-color;
		}
		&:disabled {
			border-color: $acms-form-disabled-border-color;
			background-color: $acms-form-disabled-bg-color;
			color: $acms-form-disabled-text-color;
			cursor: not-allowed;
		}
	}
	select::-ms-expand {
		// IE対応
		display: none;
	}
	select[multiple="multiple"] {
		-webkit-appearance: none;
		padding: 7px 10px;
		background: $acms-form-multiple-bg-color;
		box-shadow: $acms-form-box-shadow;
		&:focus {
			outline: none;
			border-color: $acms-form-focus-border-color;
			box-shadow: $acms-form-focus-box-shadow;
		}
		&:disabled {
			border-color: $acms-form-disabled-border-color;
			background-color: $acms-form-disabled-bg-color;
			color: $acms-form-disabled-text-color;
			cursor: not-allowed;
		}
	}
	@if $admin==true {
		.select2-container--default .select2-selection--single .select2-selection__arrow b {
			border-color: #999999 transparent transparent;
			left: 5px;
		}
	}
}

@if $admin==true {
	.select2-container {
		vertical-align: middle !important;
		&.select2-in-modal {
			z-index: zIndex(select2-container);
		}
		.select2-selection.acms-selectbox {
			border-radius: 3px;
			padding-top: 11px;
			padding-bottom: 10px;
			background-color: $acms-form-select-bg-color;
			border-color: rgba(0, 0, 0, .2);
			height: auto;
			@include font-size(16);
			color: #000;
			&:hover {
				border-color: $acms-form-hover-border-color;
				background-color: $acms-form-select-bg-color;
			}
			.select2-selection__rendered {
				line-height: 1.3;
			}
			.select2-selection__arrow {
				margin-top: 8px;
			}
			@media (min-width: $breakpoint-md-min) {
				padding-top: 6px;
				padding-bottom: 7px;
				@include font-size(12);
				line-height: 1.2;
				.select2-selection__arrow {
					margin-top: 0;
				}
			}
		}
		.acms-select-dropdown {
			&.select2-dropdown {
				border: $acms-form-border;
				box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .2);
			}
			.select2-search__field {
				background: #FBFBFB;
				border: $acms-form-border;
				border-radius: 3px;
				color: #333;
				line-height: 1;
				box-shadow: $acms-form-box-shadow;
				transition: background-color .2s;
				&:hover {
					background: #FFF;
					border-color: $acms-form-hover-border-color;
				}
				&:focus {
					background: #FFF;
					outline: none;
					border-color: $acms-form-focus-border-color;
					box-shadow: $acms-form-focus-box-shadow, $acms-form-box-shadow;
				}
			}
			.select2-results__option {
				padding: 3px 6px;
			}
			.select2-results__option[aria-selected=true] {
				background-color: #dae6fb;
				&.select2-results__option--highlighted[aria-selected] {
					background-color: #5897fb;
				}
			}
			.select2-results__group {
				padding: 2px 5px;
				background: #F1F1F1;
				@include font-size(12) color: #616161;
			}
		}
	}
}

// デスクトップ対応
@media (min-width: $breakpoint-md-min) {
	.acms-form {
		input[type="text"],
		input[type="password"],
		input[type="datetime"],
		input[type="datetime-local"],
		input[type="date"],
		input[type="month"],
		input[type="time"],
		input[type="week"],
		input[type="number"],
		input[type="email"],
		input[type="url"],
		input[type="search"],
		input[type="tel"] {
			@include font-size(13);
			padding-top: 6px;
			padding-bottom: 6px;
		}
		textarea,
		.entryFormLiteEditor {
			@include font-size(13);
		}
		select {
			@include desktop-select();
		}
	}
}

.acms-form {
	select {
		@include desktop-select-for-ie();
	}
}

// ---------------
// ブロック
// ---------------
// フォーム ブロック
.acms-form-block {
	display: block;
}

// フォーム インライン
.acms-form-inline,
.acms-form-inline label {
	display: inline;
}

// フォームグループ
.acms-form-group {
	@include clearfix();
	margin-bottom: 10px;
}

.acms-form-action {
	display: table;
	border-collapse: separate;
	.acms-form-side,
	.acms-form-side-btn,
	input {
		display: table-cell;
	}
	.acms-form-side {
		width: 1%;
		padding: 0 6px;
		color: #333;
		line-height: 1;
		@include font-size(14);
		vertical-align: middle;
		background: #ECECEC;
		border: $acms-form-border;
		border-radius: 3px;
		vertical-align: middle;
		color: #333;
		line-height: 1.5;
		&:link,
		&:hover,
		&:visited,
		&:active,
		&:focus {
			color: #333;
		}
	}
	a.acms-form-side:hover {
		background: #F1F1F1;
		border-color: $acms-form-hover-border-color;
		text-decoration: none;
	}
	.acms-form-side:first-child {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	.acms-form-side:last-child {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.acms-form-side-btn {
		position: relative;
		width: 1%;
		white-space: nowrap;
		vertical-align: top;
	}
	.acms-form-side-btn:first-child {
		>.acms-btn,
		>.acms-btn-admin {
			vertical-align: top;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
	.acms-form-side-btn:last-child {
		>.acms-btn,
		>.acms-btn-admin {
			vertical-align: top;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
	.acms-form-side {
		.acms-form-checkbox,
		.acms-form-radio {
			padding: 0;
		}
		.acms-ico-radio,
		.acms-ico-checkbox {
			margin-right: 0;
		}
	}
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="password"],
	input[type="url"] {
		height: 44px;
		width: 100%;
		&:first-child {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right: 0;
		}
		&:last-child {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-left: 0;
		}
	}
	@media (min-width: $breakpoint-md-min) {
		input[type="text"],
		input[type="search"],
		input[type="email"],
		input[type="password"],
		input[type="url"] {
			height: 30px;
		}
	}
	&.acms-form-action-separate {
		.acms-form-side-btn:first-child {
			padding: 0 10px 0 0;
			>.acms-btn,
			>.acms-btn-admin {
				vertical-align: top;
				border-radius: 3px;
			}
		}
		.acms-form-side-btn:last-child {
			padding: 0 0 0 10px;
			>.acms-btn,
			>.acms-btn-admin {
				vertical-align: top;
				border-radius: 3px;
			}
		}
		input[type="text"],
		input[type="search"],
		input[type="email"],
		input[type="password"],
		input[type="url"] {
			width: 100%;
			&:first-child {
				border: 1px solid #999;
				border-radius: 3px;
			}
			&:last-child {
				border: 1px solid #999;
				border-radius: 3px;
			}
		}
	}
}

// エラー
.acms-form-error {
	border-color: $acms-form-error-border-color;
	background: $acms-form-error-bg-color;
	color: $acms-form-error-text-color;
}

.acms-text-error {
	display: block;
	color: $acms-text-error-color;
}

// ---------------
// 幅
// ---------------
// フォーム幅  100%
.acms-form-width-full {
	width: 100%;
}

// フォーム幅  750%
.acms-form-width-3quarters {
	width: 75%;
}

// フォーム幅  50%
.acms-form-width-half {
	width: 50%;
}

// フォーム幅  250%
.acms-form-width-quarter {
	width: 25%;
}

// フォーム幅 大
.acms-form-width-large {
	max-width: $acms-form-width-large-width;
	width: 100%;
}

// フォーム幅 中
.acms-form-width-medium {
	max-width: $acms-form-width-medium-width;
	width: 100%;
}

// フォーム幅 小
.acms-form-width-small {
	max-width: $acms-form-width-small-width;
	width: 100%;
}

// フォーム幅 ミニ
.acms-form-width-mini {
	max-width: $acms-form-width-mini-width;
	width: 100%;
}

// ---------------
// チェックボックスとラジオボタン 画像
// ---------------
.acms-ico-checkbox,
.acms-ico-radio {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px 0 0;
	vertical-align: middle;
	*width: auto;
	*height: auto;
	_width: auto;
	_height: auto;
}

// チェックボックス
.acms-ico-checkbox {
	background: url('#{$acms-input-images-path}') no-repeat left top;
	background-size: 40px 80px; // IE6-IE8
	*background-image: none;
	_background-image: none;
}

.acms-form-checkbox {
	input {
		position: absolute;
		margin: 0;
		padding: 0;
		opacity: 0;
		font-size: 100%;
	}
	input:focus+label .acms-ico-checkbox,
	input:focus+.acms-ico-checkbox {
		// 2つめの記述は旧マークアップとの互換性対応
		background: url('#{$acms-input-images-path}') no-repeat left -60px;
		background-size: 40px 80px;
	}
	input:checked+label .acms-ico-checkbox,
	input:checked+.acms-ico-checkbox {
		// 2つめの記述は旧マークアップとの互換性対応
		background: url('#{$acms-input-images-path}') no-repeat left -20px;
		background-size: 40px 80px;
	}
	input:disabled+label .acms-ico-checkbox,
	input:disabled+.acms-ico-checkbox {
		// 2つめの記述は旧マークアップとの互換性対応
		background: url('#{$acms-input-images-path}') no-repeat left -40px;
		background-size: 40px 80px;
		cursor: not-allowed;
	}
	input:disabled+label {
		opacity: $acms-form-disabled-opacity;
		&:hover {
			cursor: not-allowed;
		}
	}
	label {
		&:hover {
			cursor: pointer;
		}
	}
}

.acms-ico-radio {
	background: url('#{$acms-input-images-path}') no-repeat -20px top;
	background-size: 40px 80px;
}

.acms-form-radio {
	input {
		position: absolute;
		margin: 0;
		padding: 0;
		opacity: 0;
		font-size: 100%;
	}
	input:focus+label .acms-ico-radio,
	input:focus+.acms-ico-radio {
		// 2つめの記述は旧マークアップとの互換性対応
		background: url('#{$acms-input-images-path}') no-repeat -20px -60px;
		background-size: 40px 80px;
	}
	input:checked+label .acms-ico-radio,
	input:checked+.acms-ico-radio {
		// 2つめの記述は旧マークアップとの互換性対応
		background: url('#{$acms-input-images-path}') no-repeat -20px -20px;
		background-size: 40px 80px;
	}
	input:disabled+label .acms-ico-radio,
	input:disabled+.acms-ico-radio {
		// 2つめの記述は旧マークアップとの互換性対応
		background: url('#{$acms-input-images-path}') no-repeat -20px -40px;
		background-size: 40px 80px;
		cursor: not-allowed;
	}
	input:disabled+label {
		opacity: $acms-form-disabled-opacity;
		&:hover {
			cursor: not-allowed;
		}
	}
	label {
		&:hover {
			cursor: pointer;
		}
	}
}

// ---------------
// チェックボックスとラジオボタン ボタン
// ---------------
// ボタン全体
.acms-form-checkbox,
.acms-form-radio {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-right: 15px;
}

.acms-form-radio {
	&:before,
	&::before {
		width: 16px;
		height: 16px;
		border-radius: 10px;
	}
}

.acms-btn-checkbox label,
.acms-btn-radio label {
	width: auto;
}

// チェックボックス
.acms-btn-checkbox {
	display: none;
	+label {
		display: inline-block;
		position: relative;
		padding: 9px;
		border: 1px solid #CACECE;
		border-radius: 3px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);
		background-color: #FAFAFA;
	}
	+label:active,
	&:checked+label:active {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
	}
	&:checked+label {
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
		background-color: #BBBBBB;
		color: #FFFFFF;
	}
	&:checked+label:after {
		content: '';
		position: absolute;
		top: 0;
		left: 3px;
		color: #99a1a7;
		@include font-size(14);
		@include font-size(14);
	}
}

// ラジオボタン
.acms-btn-radio {
	display: none;
	+label {
		-webkit-appearance: none;
		display: inline-block;
		position: relative;
		padding: 9px;
		border: 1px solid #CACECE;
		border-radius: 50px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);
		background-color: #FAFAFA;
	}
	&:checked+label:after {
		content: '';
		position: absolute;
		top: 3px;
		left: 3px;
		width: 12px;
		height: 12px;
		text-shadow: 0;
		@include font-size(32);
	}
	&:checked+label {
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1), inset 0 0 10px rgba(0, 0, 0, 0.1);
		background-color: #BBBBBB;
		color: #FFFFFF;
	}
	+label:active,
	.acms-btn-radio:checked+label:active {
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 3px rgba(0, 0, 0, 0.1);
	}
}
