@mixin inputs {

	select,
	input,
	textarea,
	.ui-selectmenu-button {
		@content;
	}
}

.liquid-form {

	.input-container {
		display: inline-block;
		margin-bottom: 20px;
		position: relative;

		.ui-selectmenu-button {
			margin-bottom: 0 !important;
		}
	}
	@include inputs {
		display: flex;
		align-items: center;
		width: 100%;
		height: 50px;
		padding: 0 2em;
		position: relative;
		border: 1px solid #d5d6de;
		border-radius: 0;
		background: none;
		color: #b7b9c4;
		-webkit-transition: all 0.3s;
						transition: all 0.3s;
		
		@include placeholder {
			color: inherit;
		}
		&:focus {
			outline: none;
			border-color: darken(#d5d6de, 20%);
			color: darken(#d5d6de, 20%);
		}
	}
	.ui-selectmenu-icon {
		visibility: hidden;
		order: 1;
	}
	.input[type=submit],
	button[type=submit] {
		height: 50px;
	}
	button[type=submit] {

		> span {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

.liquid-form-inputs-sm {

	@include inputs {
		height: 40px;
	}
	.input[type=submit],
	button[type=submit] {
		height: 40px;
	}
}
.liquid-form-inputs-lg {
	
	@include inputs {
		height: 60px;
	}
	.input[type=submit],
	button[type=submit] {
		height: 60px;
	}
}

.liquid-form-inputs-round {

	@include inputs {
		border-radius: 3px;
	}
	input[type=submit],
	button[type=submit] {
		border-radius: 3px;
	}
}

.date-picker {
	cursor: pointer;

	&:focus {
		cursor: auto;
	}
}
.liquid-input-icon {
	display: inline-block;
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
}
.liquid-input-icon-right {
	left: auto;
	right: 15px;
}
.liquid-input-icon-left {
	right: auto;
	left: 15px;
}

/* Jquery UI */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	background-color: #ededed;
	border-color: #ededed;
	color: #000;
}
.ui-selectmenu-button {

	&:active {
		background-color: transparent;
		color: #9c9eb1;
	}
}
.ui-widget.ui-widget-content {
	max-height: 40vh;
	border-color: #e4e4eb;
}