//colors -> color/_colors.scss
// $color_silver_sand_approx: #c2c2c2;
// $color_mercury_approx: #e4e4e4;
// $color_wild_sand_approx: #f5f5f5;
// $color_mountain_mist_approx: #999999;
// $white: #ffffff;
// $color_lynch_approx: #617897;
// $color_bay_of_many_approx: #1a4580;
// $color_cornflower_blue_approx: #549ffb;
// $color_delta_approx: #a4a4a4;
// $color_st_tropaz_approx: #2f5b99;
// $color_malibu_approx: #73b2ff;
// $color_fuscous_gray_approx: #555555;
// $color_suva_gray_approx: #888888;
// $color_celeste_approx: #cccccc;

//入力部品
//@extend-elements
//original selectors
//input.inpbr, select.inpbr, textarea.inpbr
%extend_ci1 {
	border-top: 1px solid $color_suva_gray_approx;
	border-right: 1px solid $color_celeste_approx;
	border-bottom: 1px solid $color_celeste_approx;
	border-left: 1px solid $color_suva_gray_approx;
}

//トグルボタン（ホバーで反転）
.btn-toggle-01 {
	padding-bottom: 1px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 4px;
	border: 1px solid $color_silver_sand_approx;
	display: block;
	width: 18px;
	height: 16px;
	cursor: pointer;
	background: $color_mercury_approx;
	background: linear-gradient($color_wild_sand_approx 0, $color_mercury_approx 100%);
	color: $color_mountain_mist_approx;
	line-height: 1;
	//Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	text-shadow: 1px 1px 0 $white;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	&:hover {
		background: $color_wild_sand_approx;
		background: linear-gradient($white 0, $color_wild_sand_approx 100%);
	}
}
input {
	//色つきボタン
	&.gr-btn {
		padding: 1px 4px;
		border: 1px solid $color_lynch_approx;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 5px;
		cursor: pointer;
		min-width: 70px;
		min-height: 25px;
		color: $white;
		background: $color_bay_of_many_approx;
		background: linear-gradient($color_cornflower_blue_approx 0, $color_bay_of_many_approx 100%);
		font-weight: bold;
		zoom: 1;
		&:disabled {
			color: $color_delta_approx;
		}
		&.gr-size-01 {
			min-width: 85px;
		}
		&.gr-size-02 {
			min-width: 120px;
		}
		&.gr-size-03 {
			min-width: 180px;
		}
		&:hover {
			background: $color_st_tropaz_approx;
			background: linear-gradient($color_malibu_approx 0, $color_st_tropaz_approx 100%);
		}
	}
	//グレーボタン
	&.gr-btn-02 {
		padding: 1px 4px;
		border: 1px solid $color_silver_sand_approx;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 5px;
		cursor: pointer;
		min-width: 60px;
		min-height: 25px;
		color: $color_fuscous_gray_approx;
		background: $color_mercury_approx;
		background: linear-gradient($color_wild_sand_approx 0, $color_mercury_approx 100%);
		font-weight: bold;
		&:disabled {
			color: $color_delta_approx;
		}
		&.gr-size-01 {
			min-width: 85px;
		}
		&.gr-size-02 {
			min-width: 120px;
		}
		&.gr-size-03 {
			min-width: 180px;
		}
		&:hover {
			background: $color_wild_sand_approx;
			background: linear-gradient($white 0, $color_wild_sand_approx 100%);
		}
	}
	//日付系
	&.datepicker {
		width: 66px;
	}
	&.hasDatepicker {
		width: 66px;
	}
	&.datetimepicker {
		width: 135px;
	}
	&.timepicker {
		width: 60px !important;
	}
	&.datepicker-form-size-01 {
		width: 66px !important;
	}
	&.datepicker-form-size-02 {
		width: 80px !important;
	}
	&.datetimepicker-form-size-01 {
		width: 135px !important;
	}
	&.datetimepicker-form-size-02 {
		width: 147px !important;
	}
	&.timepicker-form-size-01 {
		width: 60px !important;
	}
	//サイズ
	&.form-size-01 {
		width: 200px;
	}
	&.form-size-02 {
		width: 150px;
	}
	&.form-size-03 {
		width: 165px;
	}
	&.form-size-04 {
		width: 360px;
	}
	&.form-size-06 {
		width: 220px;
	}
	&.form-size-07 {
		width: 100px;
	}
	&.form-size-08 {
		width: 96%;
		zoom: 1;
	}
	&.form-size-09 {
		width: 400px;
		zoom: 1;
	}
	&.form-size-10 {
		width: 80px;
	}
	&.form-size-11 {
		width: 44px;
	}
	&.inpbr {
		@extend %extend_ci1;
	}
}
select {
	//サイズ
	&.form-size-01 {
		width: 200px;
	}
	&.form-size-02 {
		width: 150px;
	}
	&.form-size-03 {
		width: 165px;
	}
	&.form-size-04 {
		width: 360px;
	}
	&.form-size-06 {
		width: 220px;
	}
	&.form-size-07 {
		width: 100px;
	}
	&.form-size-08 {
		width: 96%;
		zoom: 1;
	}
	&.form-size-09 {
		width: 400px;
		zoom: 1;
	}
	&.form-size-10 {
		width: 80px;
	}
	&.form-size-11 {
		width: 44px;
	}
	&.form-size-12 {
		width: 150px;
		height: 80px;
	}
	&.inpbr {
		@extend %extend_ci1;
	}
}
textarea {
	//サイズ
	&.form-size-05 {
		width: 99%;
	}
	&.inpbr {
		@extend %extend_ci1;
	}
}
//選択部品
option {
	padding: 1px 5px 0;
}
ul {
	&.list-radio-01 li {
		display: inline;
		margin-right: 1.8em;
		input {
			margin: -1px 5px 0 0;
			vertical-align: middle;
		}
		label {
			display: inline-block;
		}
	}
	&.list-check-01 li {
		display: inline;
		margin-right: 1.8em;
		input {
			margin: -1px 5px 0 0;
			vertical-align: middle;
		}
		label {
			display: inline-block;
		}
	}
}

textarea.width-constraint {
	max-width: calc(100% - 8px);
}