/* Forms
----------------------------------------------------------*/

.form-control {
	@include border-radius(3px);
	@include box-shadow(none);
	background-color: $color-grey-2;
	font-size: 13px;
	padding: 15px 20px;
	height: 46px;
	border: none;
	border: 1px solid $color-grey-2;
	margin-bottom: 3px;
	@include appearance(none);

	@include input-placeholder {
		color: inherit;
		@include opacity(0.5);
	}

	&:focus, &:active {
		@include box-shadow(none);
		border: 1px solid $color-grey-3;
	}

	&.input-2 {
		@include border-radius(30px);
	}

	&.input-sm {
		padding: 6px 13px;
		height: 38px;
		font-size: 12px;
	}

	&.input-lg {
		padding: 10px 20px;
		height: 54px;
		font-size: 12px;
		font-size: 14px;
	}

	&.bordered {
		background: transparent !important;
		color: $color-white;
		border: 1px solid rgba($color-white,0.2);

		@include input-placeholder {
		    color: rgba($color-white,0.5);
		}

		&:focus, &:active {
			border-color: rgba($color-white,0.4);
		}
	}

	&.valid { border-color: $color-green; }
	&.error { border-color: $color-red; }
}

textarea.input-sm { height: auto !important; }

.dark .form-control {
	background-color: $color-white;
}

/* Select */

select.form-control {
	line-height: 1;
}
.select-wrapper {
	position: relative;
	&:after {
		position: absolute;
		top: 50%;
		display: block;
		@include translate3d(0,-50%,0);
		right: 13px;
		color: $color-text-muted-dark;
		font-family: themify;
		content:"\e62a";
	}

	&.bordered:after {
		color: $color-text-muted-light;
	}
}

/* Inline Forms */

.input-inline {
	display: inline-block;
	min-width: 200px;
	margin-right: 3px;
}

.input-qty {
	max-width: 80px;
	min-width: 20px;
}

.form-inline .form-control {
	min-width: 200px;
}

/* Inner button */

.inner-button {
	position: relative;
	> button {
		position: absolute;
		top: 4px;
		right: 4px;
		border: none;
		width: 40px;
		height: 40px;
		@include border-radius(50%);
		background: $color-primary;
		color: $color-white;
		font-size: 15px;

		> * {
			position: absolute;
			top: 50%;
			left: 50%;
			@include translate3d(-50%,-50%,0);
			@include filter(blur(0));
		}
	}
	> input {
		padding-right: 44px !important;
	}
	> .input-sm + button {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}
}

/* Checkbox */

.checkbox {
	input[type="checkbox"] {
		display: none;

		& + label {
			position: relative;
			padding-left: 27px;

			&:before {
				position: absolute;
				left: 0;
				top: 2px;
				width: 16px;
				height: 16px;
				@include border-radius(2px);
				background-color: $color-grey-2;
				display: block;
				content: ' ';
			}
			&:after {
				position: absolute;
				top: 1px;
				left: 2px;
				font-family:themify;
				font-weight: 800;
				content:"\e64c";
				color: $color-primary;
				font-size: 13px;
				display: block;
				@include transition(all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275));
				@include translateY(-150%);
				@include opacity(0);
			}
		}

		&:checked + label:after {
			@include translateY(0);
			@include opacity(1);
		}
	}
}

/* Radio */

.radio {
	input[type="radio"] {
		display: none;

		& + label {
			position: relative;
			padding-left: 27px;

			&:before {
				position: absolute;
				left: 0;
				top: 2px;
				width: 16px;
				height: 16px;
				@include border-radius(50%);
				background-color: $color-grey-2;
				display: block;
				content: ' ';
			}
			&:after {
				position: absolute;
				top: 5px;
				left: 3px;
				width: 10px;
				height: 10px;
				content:" ";
				background-color: $color-primary;
				@include border-radius(50%);
				display: block;
				@include transition(all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275));
				@include scale(0);
				@include opacity(0);
			}
		}

		&:checked + label:after {
			@include scale(1);
			@include opacity(1);
		}
	}
}

/* Recaptcha */

.g-recaptcha {
	display: inline-block;
	
	&.error {
		@include animation(recaptchaError 1s both);
	}
}

@include keyframes(recaptchaError) {
	0% { @include box-shadow(none); }
	50% { @include box-shadow(0 0 20px 0 rgba($color-red,10%));}
	0% { @include box-shadow(none); }
}