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

label.ui-input-text {
	font-size: 22 * @unit_base;
	line-height: 1.2;
	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: 16 * @unit_base;
	display: block;
}
input.ui-input-text {
	appearance: none;
	-webkit-appearance: none;
}
textarea.ui-input-text {
	height: 50*@unit_base;
	resize: none;
	-webkit-transition: height 200ms linear;
	-moz-transition: height 200ms linear;
	-o-transition: height 200ms linear;
	-ms-transition: height 200ms linear;
	transition: height 200ms linear;
}

.ui-input-search {
	position: relative;

	padding-right : 36 * @unit_base;
	padding-left : 36 * @unit_base;

	border : 1px solid @color_searchbar_border;
	-webkit-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
	-moz-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
	-o-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
	-ms-box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;
	box-shadow: inset 2 * @unit_base 2 * @unit_base 2 * @unit_base @color_searchbar_border;

	input.ui-input-text {
		width : 100%;
		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: 36 * @unit_base;
		height: 33 * @unit_base;
		.ui-btn-inner {
			padding : 6 * @unit_base;
		}
	}
	.ui-icon-deleteSearch {
		width: 22 * @unit_base;
		height: 22 * @unit_base;
	}

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

/* code for label+inputbox : remove this code if webApp dev. controls input area */
@media all and (min-width: 721*@unit_base) {
	label.ui-input-text:not([data-type='search']) {
		vertical-align: top;
		display: inline-block;
		margin: 0 2% 0 0;
	}
	input.ui-input-text:not([data-type='search']), textarea.ui-input-text:not([data-type='search']){
		width: 60%;
		display: inline-block;
	}
	.ui-input-search input.ui-input-text:not([data-type='search']) {
		width: 85%;
	}
}

/* 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 */

.input-search-bar {
	position : relative;

	background-color: @color_searchbar_bg;
	padding: @search-bar-padding;
	vertical-align: middle;
	.ui-corner-all {
		.LESSborder-radius-all(.3em);
	}

	.ui-input-search {
		font-size : 16 * @unit_base;
		display : block;
		position: relative;

		background-color: @color_searchbar_input_field_bg;
		.ui-input-text {
			height: 33 * @unit_base;
			padding : 0px;

			margin-right : 38 * @unit_base;
		}

		.ui-image-search {
			position: absolute;
			top: 0px;
			left: 0px;
			width : 22 * @unit_base;
			height : 22 * @unit_base;
			margin: 6 * @unit_base;
		}
	}

	.ui-input-search-default {
		margin-right : 75 * @unit_base;
		-webkit-transition: width 400ms linear;
		-moz-transition: width 400ms linear;
		-o-transition: width 400ms linear;
		-ms-transition: width 400ms linear;
		transition: width 400ms linear;
	}

	.ui-input-search-wide {
		margin-right : 75 * @unit_base;
		margin-right : 0 * @unit_base;
		-webkit-transition: width 400ms linear;
		-moz-transition: width 400ms linear;
		-o-transition: width 400ms linear;
		-ms-transition: width 400ms linear;
		transition: width 400ms linear;
	}

	.ui-btn-icon-cancel.ui-input-cancel {
		display: inline-block;
		position: absolute;

		top	: 3 * @unit_base;
		right : 0 * @unit_base;
		height : 33 * @unit_base;
		margin-right : 10 * @unit_base;

		vertical-align: middle;
		padding : 0px;

		border-color : none;

		width : 68 * @unit_base;
		-webkit-transition: all 400ms linear;
		-moz-transition: all 400ms linear;
		-o-transition: all 400ms linear;
		-ms-transition: all 400ms linear;
		transition: all 400ms linear;

		.ui-btn-inner {
			padding-top : 6 * @unit_base;
			padding-bottom : 6 * @unit_base;
			.ui-btn-text{
				font-size : 15 * @unit_base;
			}
		}

		&.ui-btn-cancel-hide {
			right : -75 * @unit_base;
			visibility: hidden;
		}
		&.ui-btn-cancel-show {
			right : 0px;
			visibility: visible;
		}
	}

	.ui-search-bar-icon {
		margin-left : 42 * @unit_base;
	}

	.ui-btn.ui-btn-search-front-icon {
		position : absolute;
		width : 35 * @unit_base;
		height : 35 * @unit_base;
		top : 2 * @unit_base;
		border-radius : 66 * @unit_base;
		>.ui-btn-inner.ui-btn-icon-only {
			border-radius : 66 * @unit_base;
		}
	}
}

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

.ui-image-search {
	background-image: url(images/controls/00_search_icon.png);
	background-repeat: no-repeat;
	background-size : 100% 100%;
}

.ui-icon-deleteSearch {
	background-image: url(images/controls/00_field_btn_clear.png);
	background-repeat: no-repeat;
	background-size : 100% 100%;
}