// Main Container
#wpls {
	* {
		box-sizing:border-box;
		-webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
	}

	position:relative;

	&.wpls--collapse {

		#wpls--post-list {
			position:absolute;
			left:0;
			right:0;
		}
	}
}

// Results wrap
.wpls--results-wrap {
	position:absolute;
	margin-bottom:-30px; // complete arbitrary but allows the transition property a start
	@include transition( margin-bottom $transition--time ease, opacity $transition--time ease );

	&.wpls--show {
		position:static;
		margin-bottom:0;
	}
}

// Input Wrap
#wpls--input-wrap {
	position:relative;
}

// The Input
#wpls--input {
	height:$input--height;
	border-radius:$input--radius;
	padding:$input--padding;
	background:$input--bg;
	border:1px solid $input--border;
	color:$input--color;

	&:focus {
		outline:none;
		box-shadow:none;
		border:1px solid transparentize($color--accent,0.6);
	}

}

// List of posts
#wpls--post-list {
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
	background:$color--main;
	border-bottom-right-radius:$input--radius;
	border-bottom-left-radius:$input--radius;

	li {
		padding:0;
		margin:0;

		&:nth-child(even) {
			background:lighten($color--main,3);
		}
	}

	a {
		line-height:1;
		display:block;
		text-decoration:none;
		border:none;
		padding:$spacing--sm;
		text-shadow:none;
	}
}

// Item Link
.wpls--link {
	@include clearfix();
	@include transition(background $transition--time ease);

	&:hover {
		background:$color--item-hover;
	}

	&:hover::last-child {
		border-bottom-right-radius:$input--radius;
		border-bottom-left-radius:$input--radius;
	}
}

// Title And image
.wpls--item-image,
.wpls--item-title-wrap {
	overflow:hidden;
	_overflow:visible;
	zoom:1;
}

// Item image
.wpls--item-image {
	float:left;
	max-width:$thumb--width;
	margin-right:$spacing--sm;
}


// Item title
.wpls--item-title {
	margin:5px auto;
	width:auto;
	font-family:$font--family;
	font-size:$font--size__lg;
	line-height:$font--size__lg + 2;
	color:$font--color;
}
.wpls--item-image + .wpls--item-title-wrap + .wpls--item-excerpt {
	margin-top:7px;
}

// Item Content
.wpls--item-excerpt {
	font-family:$font--family;
	font-size:$font--size__sm;
	line-height:$font--size__lg;
	color:$font--color;

	p {
		margin:0;
	}
}

// Character helper
#wpls--helper {
	position:absolute;
	right:7px;
	top:7px;
	z-index:2;
	@include wpls-badge($color--accent);
}

// Clear Search Icon
#wpls--clear-search {
	position:absolute;
	right:10px;
	top:10px;
	color:$color--dark;
	z-index:1;

	&:hover {
		color:darken($color--dark,5);
		cursor:pointer;
	}
}

// Compact Mode
#wpls.wpls--style-compact {
	.wpls--item-title {
		font-size:$font--size__lg - 4;
		line-height:$font--size__lg - 2;
	}

	.wpls--item-image {
		max-width:25px;
		margin-right:7px;
	}

	#wpls--post-list a {
		padding:2px;
	}

	#wpls--input {
		height:30px;
		padding:4px 7px;
		font-size:15px;
		line-height:18px;
		border-radius:2px;
	}

	#wpls--clear-search {
		top:6px;
		right:6px;
	}

	.wpls--loading {
		top: -4px;
  		right: 6px;
	}
}


// Utility Class
.wpls--hide {
	height:0;
	opacity:0;
}
.wpls--show {
	height:auto;
	opacity:1;
}


// Mods

// Results Inside
.wpls--results-style-inside {

	.wpls--results-wrap {
		position:absolute;
		z-index:-1;
		right:$spacing--lg;
		top:6px;
		@include wpls-badge($color--dark);

		&.wpls--show {
			z-index:1;
		}
	}

	&.wpls--no-results .wpls--results-wrap{
		right:6px;
	}
}

// Resulst style inside and Compact
.wpls--results-style-inside.wpls--style-compact {

	.wpls--results-wrap {
		font-size: 12px;
		top: 4px;
		padding: 1px 6px;
		right: 33px;
	}

	&.wpls--no-results .wpls--results-wrap{
		right:6px;
	}
}