/* ------------------------------
 フォーム
------------------------------- */
/* ---------------
 フォーム 基本設定
--------------- */
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"],
	input[type="color"]{
		@include font-size(15);
		padding: 14px 5px 11px 5px;
		border: $acms-form-border;
		border-radius: 3px;
		color: #333;
		line-height: 1;
		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;
		}
		 &::-webkit-input-placeholder,
		 &:-moz-input-placeholder,
		 &:-ms-input-placeholder {
			@include font-size(11);
			padding-top: 2px;
		}

		// ---------------
		// サイズ
		// ---------------
		// フォームサイズ 大
		 &.acms-form-large{
			height: 48px;
			@include font-size(20);

			 &::-webkit-input-placeholder,
			 &:-moz-input-placeholder,
			 &:-ms-input-placeholder {
				@include font-size(20);
			}
		}

		// フォームサイズ 小
		 &.acms-form-small{
			@include font-size(11);
		}
	}

	// iOS Safari用
	input[type="search"] {
		-webkit-appearance: none;
	}

	textarea{
		@include font-size(15);
		padding: 5px 5px 4px ;
		border: $acms-form-border;
		border-radius: 3px;
		color: #333;
		line-height: 1;
		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;
		}
		line-height: 1.7;
		 &.acms-form-large{
			height: 48px;
			@include font-size(20);
			vertical-align: middle;
		}
		 &.acms-form-small{
			height: 20px;
			@include font-size(10);
		}
		 &::-webkit-input-placeholder,
		 &:-moz-input-placeholder,
		 &:-ms-input-placeholder {
			@include font-size(11);
			padding-top: 2px;
		}
	}
	select{
		@include btn();
		@include btn-color();
		padding-top: 17px;
		padding-bottom: 15px;
		text-align: left;
		 &:hover,
		 &.hover {
			border: $acms-form-select-border-hover;
			@include btn-color($start-color:#FCFCFC, $end-color:#E1E1E1, $color: #333);
			text-decoration: none;
		}
		 &: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[multiple="multiple"] {
		padding: 7px 10px;
		background: $acms-form-multiple-bg-color;
		box-shadow: $acms-form-box-shadow;

		 &:hover,
		 &.hover {
			padding: 7px 10px;
		}

		 &: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;
		}
	}
	// webkitのみ
	@media screen and (-webkit-min-device-pixel-ratio:0){
		// プルダウン
		select{
			-webkit-appearance: button;
			background-color: $acms-form-select-bg-color;
			padding-left: 10px;
			padding-right: 30px;
			background:url($acms-form-select), -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E1E1E1));
			background:url($acms-form-select),linear-gradient(top, #F9F9F9, #E1E1E1);
			background-repeat: no-repeat;
			background-position: right center;
			 &:hover,
			 &.hover {
				border: $acms-form-select-border-hover;
				-webkit-appearance: button;
				background-color: $acms-form-select-bg-color;
				padding-left: 10px;
				padding-right: 30px;
				background:url($acms-form-select), -webkit-gradient(linear, left top, left bottom, from(#FCFCFC), to(#E1E1E1));
				background:url($acms-form-select),linear-gradient(top, #FCFCFC, #E1E1E1);
				background-repeat: no-repeat;
				background-position: right center;
				text-decoration: none;
			}
		}

		select[multiple="multiple"] {
			-webkit-appearance: none;
			background: $acms-form-multiple-bg-color;
		}
	}
}
// ---------------
// ブロック
// ---------------
// フォーム ブロック
.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;
	.acms-form-side,
	.acms-form-side-btn,
	input {
		display: table-cell;
	}
	.acms-form-side {
		width: 1%;
		padding: 0 6px;
		background: #EEE;
		border: 1px solid #999;
		border-radius: 3px;
		vertical-align: middle;
		line-height: 1.5;
	}
	.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;
			vertical-align: -50%;
		}
	}
	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: 27px;
		}
	}
}

// エラー
.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;
	// IE6-IE8
	width: auto\9;
	height: auto\9;
	*width: auto;
	*height: auto;
	_width: auto;
	_height: auto;
}
// チェックボックス
.acms-ico-checkbox {
	background: url('#{$acms-path-marker}ico_input.png') no-repeat left top;
	background-size: 40px 60px;
	// IE6-IE8
	background-image: none\9;
	*background-image: none;
	_background-image: none;

}
.acms-form-checkbox input:checked + .acms-ico-checkbox {
	background: url('#{$acms-path-marker}ico_input.png') no-repeat left -20px;
	background-size: 40px 60px;
}

.acms-form-checkbox input:disabled + .acms-ico-checkbox {
	background: url('#{$acms-path-marker}ico_input.png') no-repeat left -40px;
	background-size: 40px 60px;
	cursor: not-allowed;
}

.acms-ico-radio {
	background: url('#{$acms-path-marker}ico_input.png') no-repeat -20px top;
	background-size: 40px 60px;
	// IE6-IE8
	background-image: none\9;
	*background-image: none;
	_background-image: none;
}
.acms-form-radio input:checked + .acms-ico-radio {
	background: url('#{$acms-path-marker}ico_input.png') no-repeat -20px -20px;
	background-size: 40px 60px;
}

.acms-form-radio input:disabled + .acms-ico-radio {
	background: url('#{$acms-path-marker}ico_input.png') no-repeat -20px -40px;
	background-size: 40px 60px;
	cursor: not-allowed;
}

// ---------------
// チェックボックスとラジオボタン ボタン
// ---------------
// ボタン全体
.acms-form-checkbox,
.acms-form-radio {
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-right: 15px;
	// IE6-IE8
	position: static\9;
	*position: static;
	_position: static;
	input {
		position: absolute;
		opacity: 0;
		filter: alpha(opacity=100);
		// IE6-IE8
		position: static\9;
		*position: static;
		_position: static;
		opacity: 1\9;
	}
}

.acms-form-radio {
	padding: 3px 0 0 4px;
	 &: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 0px -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 0px 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 0px -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: 0px;
			left: 3px;
		color: #99a1a7;
		@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 0px -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: 0px;
		@include font-size(32);
	}
	 &:checked + label {
		border: 1px solid #adb8c0;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 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 0px 1px 3px rgba(0,0,0,0.1);
	}
}

// デスクトップ対応
@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"],
		input[type="color"]{
			@include font-size(13);
			padding-top: 5px;
			padding-bottom: 4px;
		}
		textarea{
			@include font-size(13);
		}
		select {
			@include desktop-btn();
			padding-right: 30px;
		}
	}
}
