@import "config.less";
@search-bar-padding: (16*@unit_base);

label.ui-input-text {
	font-size: 32 * @unit_base;
	line-height: 1.4;
	display: block;
	font-weight: normal;
	margin: 0 0 .3em;
}
input.ui-input-text, textarea.ui-input-text {
	background-image: none;
	padding: .4em;
	line-height: 1.4;
	font-size: 32 * @unit_base;
	display: block;
	width: 95%;
}
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text {
	height: 50*@unit_base;
	-webkit-transition: height 200ms linear;
	-moz-transition: height 200ms linear;
	-o-transition: height 200ms linear;
	transition: height 200ms linear;
}

.ui-input-search {
	padding: 0 0;
	position: relative;
	input.ui-input-text {
		border: none;
		background: transparent none;
		outline: 0 !important;
	}
	.ui-btn-down-s, .ui-btn-up-s, .ui-btn-hover-s {
		border: none;
		background: transparent none;
	}
	.ui-btn-icon-notext.ui-input-clear {
		width: 38 * @unit_base;
		height: 38 * @unit_base;
		.ui-btn-inner { padding: 0; }
	}
	.ui-icon-deleteSearch {
		width: 38 * @unit_base;
		height: 38 * @unit_base;
	}

	.ui-input-clear {
		position: absolute;
		right: 0;
		top: 0;
		vertical-align: middle;
		margin: 16 * @unit_base;
	}
	.ui-input-clear-hidden { display: none; }
}

.ui-image-search {
	position: absolute;
	top: 0;
	left: 0;
	width : 100%;
	margin: 16 * @unit_base;
}

.ui-image-searchfield:after {
	margin-left: 58 * @unit_base;
	content: "Search";
	color: @color_searchbar_default_text;
}

/* orientation adjustments - incomplete!*/
@media all and (min-width: 720*@unit_base){
	label.ui-input-text  {
		vertical-align: top;
		display: inline-block;
		width: 20%;
		margin: 0 2% 0 0
	}
	input.ui-input-text,
	textarea.ui-input-text,
	.ui-input-search { width: 60%; display: inline-block; }
	.ui-input-search input.ui-input-text { width: 85%; /*echos rule from above*/ }
}

/* search bar */
.ui-body-s > div > .ui-field-contain > .input-search-bar,
.ui-body-s > .ui-field-contain > .input-search-bar {
	margin : -48*@unit_base -15*@unit_base -32*@unit_base -15*@unit_base;
} /* Need to confirm exact concept : Jinhyuk */

.input-search-bar {
	position : relative;  /* In case searchbar in header : Jinhyuk */
	
	background-color: @color_searchbar_bg;
	padding: @search-bar-padding;
	vertical-align: middle;
	.ui-corner-all {
		.LESSborder-radius-all(.3em);
	}
	.ui-input-search {
		font-size : 32 * @unit_base;
		display: inline-block;
		position: relative;
		width: 70%;
		padding: 0;
		background-color: @color_searchbar_input_field_bg;
		.ui-input-text {
			height: 74 * @unit_base;
			padding : 0px;
			margin-left : 10 * @unit_base;
		}
	}
	.ui-input-search-default {
		width: 70%;
		-webkit-transition: width 400ms linear;
		-moz-transition: width 400ms linear;
		-o-transition: width 400ms linear;
		transition: width 400ms linear;
	}
	.ui-input-search-wide {
		width: 100%;
		-webkit-transition: width 400ms linear;
		-moz-transition: width 400ms linear;
		-o-transition: width 400ms linear;
		transition: width 400ms linear;
	}
	.ui-btn-icon-cancel {
		display: inline-block;
		position: absolute;
		left: 70%;

		vertical-align: middle;
		margin-left : 10 * @unit_base;
		margin-right : 10 * @unit_base;
		padding : 0px;

		height : 74 * @unit_base;
		
		border-color : none;
		.ui-btn-text{
			font-size : 32 * @unit_base;
		}	
		.ui-btn-inner {
			padding-top : 18 * @unit_base;
			padding-bottom : 18 * @unit_base;
		}	
	}
	
	.ui-btn-icon-cancel.ui-input-cancel {
		width: 26%;		
		-webkit-transition: all 400ms linear;
		-moz-transition: all 400ms linear;
		-o-transition: all 400ms linear;
		transition: all 400ms linear;
	}
	.ui-btn-cancel-hide {
		left: 100%;
		visibility: hidden;
	}
	.ui-btn-cancel-show {
		left: 70%;
		visibility: visible;
	}
}

.ui-header .input-search-bar {
	padding-top : 16 * @unit_base;
	padding-bottom : 16 * @unit_base;
}