// 
// Search Field
// ==============================




// Base
// ------------------------------

.SearchField {
	.display-flex();
}




// Field
// ------------------------------

.SearchField__field {
	.flex(1,1,0);
	padding: @gutter-sm;
	position: relative;
}




// Input
// ------------------------------

.SearchField__input {
	.placeholder( @gray-light );
	background: rgba(0, 0, 0, 0.06);
	border-radius: @border-radius-small;
	border: 0;
	font-size: @font-size-sm;
	height: @searchfield-height;
	line-height: normal;
	margin: 0;
	outline: none;
	padding: @gutter-sm (@ionicons-size-base + (@gutter-sm * 2));
	width: 100%;
	-webkit-appearance: none !important; // important required for iPad whilst using iOS 8.4
}




// Placeholder
// ------------------------------

.SearchField__placeholder {
	.transition( all @view-transition-duration @view-transition-timing-function );
	.translateZ(0);
	font-size: @font-size-sm;
	line-height: @searchfield-height;
	left: 0;
	pointer-events: none;
	position: absolute;
	text-align: center;
	white-space: nowrap;
	width: 100%;

	.is-focused & {
		width: 100px; // the width of "Search..." fix?
	}
	.has-value & {
		.transition( none );
		width: (@ionicons-size-base + (@gutter-sm * 2));
	}
}




// Icons
// ------------------------------


// base

.SearchField__icon {
	.ion();
	font-size: @ionicons-size-base;
	line-height: @searchfield-height;
	padding: 0 @gutter-sm;
	width: @ionicons-size-base + (@gutter-sm * 2);
	
	&::before {
		color: inherit;
	}
}


// search

.SearchField__icon--search {
	left: 0;
	margin-left: @gutter-sm;
	pointer-events: none;
	
	&::before {
		content: @ionicon-var-ios-search;
	}
}


// clear

.SearchField__icon--clear {
	position: absolute;
	padding: @gutter-sm;
	top: 0;
	right: @gutter-sm;
	
	&::before {
		content: @ionicon-var-close-circled;
	}
}




// Cancel
// ------------------------------

.SearchField__cancel {
	.transition( all @view-transition-duration @view-transition-timing-function );
	.translateZ(0);
	line-height: @searchfield-height;
	max-width: 0;
	padding: @gutter-sm 0;
	overflow: hidden;
	white-space: nowrap;

	&.is-visible {
		margin-right: @gutter-sm;
		max-width: 68px;
	}
}




// Variants
// ------------------------------


// default

.SearchField--default {
	background-color: @searchfield-bg;

	.SearchField__input {
		background-color: @searchfield-input-bg;
		color: @searchfield-input-color;
	}
	.SearchField__placeholder {
		color: @searchfield-placeholder-color;
	}
	.SearchField__icon {
		color: @searchfield-icon-color;

		&.Tappable-active {
			color: @searchfield-icon-pressed-color;
		}
	}
	.SearchField__cancel {
		color: @searchfield-cancel-color;
	}
}


// dark

.SearchField--dark {
	background-color: @searchfield-dark-bg;

	.SearchField__input {
		background-color: @searchfield-dark-input-bg;
		color: @searchfield-dark-input-color;
	}
	.SearchField__placeholder {
		color: @searchfield-dark-placeholder-color;
	}
	.SearchField__icon {
		color: @searchfield-dark-icon-color;

		&.Tappable-active {
			color: @searchfield-dark-icon-pressed-color;
		}
	}
	.SearchField__cancel {
		color: @searchfield-dark-cancel-color;
	}
}