// Toolbar
// ------------------------------

.item-toolbar {
	.clearfix();
	color: @gray-light;
}


// Toolbar lists

.item-breadcrumbs,
.item-toolbar-info {
	.list-unstyled();

	> li {
		.inline-align();
		padding: 0 9px;
		
		&+li:before {
			content: "\00B7";
			display: inline-block;
			left: -10px;
			position: relative;
		}
	}

	a {
		display: inline-block;
		padding-bottom: @padding-base-vertical;
		padding-top: @padding-base-vertical;

		// enlarge hit area
		margin-left: -9px;
		margin-right: -9px;
		padding-left: 9px;
		padding-right: 9px;
	}
}


// Breadcrumbs

.item-breadcrumbs {
	float: left;
	
	.separator {
		margin-right: 5px;
	}
}


// Info

.item-toolbar-info {
	clear: left;
}
.item-toolbar-create-button {
	color: @brand-success;

	&:hover,
	&:focus {
		color: lighten(@brand-success, 10%);
	}
	&:active {
		color: @brand-success;
	}
}


// Search form

.searchbox {
	float: left;
}
.searchbox-form {
	.clearfix();
	
	> button {
		float: left;
	}
}
.searchbox-field {
	float: left;
	position: relative;
	width: 15em;

	> input {
		.border-right-radius(0);

		// transitioning the bg/text color of the button looks rubbish
		// so we remove the transition on the input
		.transition( none );
	}
}
.searchbox-button {
	float: left;

	> .btn {
		.border-left-radius(0);
		height: @input-height-base;
		margin-left: -1px;
	}
}
// native focus looks weird when animating
.btn-cancel:focus {
	outline: none;
}




// Search Transition
// ------------------------------

// common
.ToolbarToggle-wrapper {
	position: relative;
}
.ToolbarToggle-enter,
.ToolbarToggle-leave {
	.transition( all 320ms cubic-bezier(0.645, 0.045, 0.355, 1) );
	left: 0;
	position: absolute;
	top: 0;
}

// animate searchbox
.searchbox.ToolbarToggle-enter {
	.translate3d(-25%, 0, 0);
	opacity: .01;
}
.searchbox.ToolbarToggle-enter-active {
	.translate3d(0, 0, 0);
	opacity: 1;
}
.searchbox.ToolbarToggle-leave {
	.translate3d(0, 0, 0);
	opacity: 1;
}
.searchbox.ToolbarToggle-leave-active {
	.translate3d(-25%, 0, 0);
	opacity: .01;
}

// animate breadcrumbs
.item-breadcrumbs.ToolbarToggle-enter {
	.translate3d(50%, 0, 0);
	opacity: .01;
}
.item-breadcrumbs.ToolbarToggle-enter-active {
	.translate3d(0, 0, 0);
	opacity: 1;
}
.item-breadcrumbs.ToolbarToggle-leave {
	.translate3d(0, 0, 0);
	opacity: 1;
}
.item-breadcrumbs.ToolbarToggle-leave-active {
	.translate3d(50%, 0, 0);
	opacity: .01;
}



// Responsive
// ------------------------------


// tablets, desktops and laptops

@media (min-width: @screen-sm) {
	.item-toolbar {
		height: @input-height-base; // stop any jumping around when the form is revealed
	}
	.item-toolbar-info {
		clear: none;
		float: right;
	}
}