//colors
// $color_gallery_approx: #ededed;
// $color_venice_blue_approx: #115d85;
// $color_quill_gray_approx: #d4d4d4;
// $color_green_leaf_approx: #4c7607;
// $white: #fff;
// $color_turtle_green_approx: #273c04;
// $color_silver_chalice_approx: #aaa;

//urls
// $url_ci_1: url(../../../../images/gem/skin/flat/icon-checkbox.png);

//@extend-elements
//original selectors
//input[type=button], input[type=submit], input[type=reset]
%extend_ci_1 {
	vertical-align: middle;
	font-size: 0.92857rem;
	padding: 5px 25px;
	background-color: $color_gallery_approx;
	min-width: 150px;
	line-height: 20px;
	border: 0 !important;
	color: $color_venice_blue_approx;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: background 300ms;
	cursor: pointer;
}

//original selectors
//.pseudo-checkbox, .pseudo-radio
%extend_ci_2 {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	height: 22px;
	width: 22px;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	border: 2px solid $color_silver_chalice_approx;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	//border-radius: 50%;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: border 300ms;
	cursor: pointer;
	margin-right: 5px;
}
//.pseudo-checkbox, .pseudo-radio
%extend_ci_2_1 {
	border-radius: 20%;
}
//.pseudo-checkbox, .pseudo-radio
%extend_ci_2_2 {
	border-radius: 50%;
}
//original selectors
//.pseudo-checkbox::after, .pseudo-radio::after
%extend_ci_3 {
	content: '';
	display: block;
	position: absolute;
	//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
	transform: scale(0);
	opacity: 0;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: 300ms;
}


.btn {
	display: block;
	float: left;
	margin-bottom: 20px;
}
input[type=button] {
	@extend %extend_ci_1;
	&:hover {
		background-color: $color_quill_gray_approx;
	}
	&.gr-btn {
		background-color: $color_green_leaf_approx;
		color: $white;
		&:hover {
			background-color: $color_turtle_green_approx;
		}
	}
}
input[type=submit] {
	@extend %extend_ci_1;
	&:hover {
		background-color: $color_quill_gray_approx;
	}
	&.gr-btn {
		background-color: $color_green_leaf_approx;
		color: $white;
		&:hover {
			background-color: $color_turtle_green_approx;
		}
	}
}
input[type=reset] {
	@extend %extend_ci_1;
	&:hover {
		background-color: $color_quill_gray_approx;
	}
}

.pseudo-parent.disabled {
	color: $color_suva_gray_approx;
}
.pseudo-parent.disabled {
	.pseudo-checkbox {
		visibility: hidden;
	}
	.pseudo-radio {
		visibility: hidden;
	}
}
.pseudo-checkbox {
	@extend %extend_ci_2;
	@extend %extend_ci_2_1;
	+ input[type='checkbox'] {
		display: none;
	}
	&:hover {
		border-color: $color_venice_blue_approx;
	}
	&.checked {
		border-color: $color_venice_blue_approx;
	}
	&.checked::after {
		opacity: 1;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale(1);
	}
}
.pseudo-radio {
	@extend %extend_ci_2;
	@extend %extend_ci_2_2;
	+ input[type='radio'] {
		display: none;
	}
	&:hover {
		border-color: $color_venice_blue_approx;
	}
	&.checked {
		border-color: $color_venice_blue_approx;
	}
	&.checked::after {
		opacity: 1;
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: scale(1);
	}
}
.pseudo-checkbox::after {
	@extend %extend_ci_3;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: $url_ci_1 center center no-repeat;
}
.pseudo-radio::after {
	@extend %extend_ci_3;
	height: 60%;
	width: 60%;
	top: 20%;
	left: 20%;
	background: $color_venice_blue_approx;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 50%;
}
.ui-jqgrid {
	.pseudo-checkbox {
		display: none;
		+ input[type='checkbox'] {
			display: inherit;
		}
	}
	.pseudo-radio {
		display: none;
		+ input[type='radio'] {
			display: inherit;
		}
	}
}
.trash {
	.pseudo-checkbox {
		display: none;
		+ input[type='checkbox'] {
			display: inherit;
		}
	}
	.pseudo-radio {
		display: none;
		+ input[type='radio'] {
			display: inherit;
		}
	}
}
input {
	&.datepicker-form-size-01 {
		width: 84px !important;
	}
	&.datepicker-form-size-02 {
		width: 100px !important;
	}
	&.datepicker {
		padding: 2px 5px;
	}
	&.datetimepicker-form-size-01 {
		width: 152px !important;
	}
	&.datetimepicker-form-size-02 {
		width: 180px !important;
	}
	&.datetimepicker {
		padding: 2px 5px;
	}
	&.timepicker-form-size-01 {
		width: 80px !important;
	}
	&.timepicker {
		padding: 2px 5px;
	}

}
.btn-toggle-01 {
	cursor: pointer;
}
.timestampselect-field select {
	width: auto !important;
}
.timeselect-field select {
	width: auto !important;
}
textarea.width-constraint {
	max-width: 100%;
}