@if $default-styles {

	// Titles
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%h1 {}
	%h2 {}
	%h3 {}
	%h4 {}
	%h5 {}
	%h6 {}

	// Inputs
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%input {
		color: $text-color;
		border-color: $gray;
		background-color: $grayLighter;

		&:focus {
			background-color: $grayLight;
		}
	}

	%input-addon {
		color: $text-color;
		border-color: $grayLight;
		background-color: $grayLighter;
	}

	// Selects
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	%select {
		color: $text-color;
		border-color: $gray;
		background-color: $grayLighter;

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

	// Buttons
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	// Default
	%btn {
		color: $text-color;
		border-color: $gray;
		background-color: $grayLight;

		// Hover/focus state
		&:hover,
		&:focus {
			background-color: darken($grayLight, 10% );
		}

		// Active state
		&.active,
		&:active {
			background-color: darken($grayLight, 20% );
		}
	}

	%btn-primary {
		color: #fff;
		border-color: darken(green, 10%);
		background-color: green;

		// Hover/focus state
		&:hover,
		&:focus {
			background-color: darken(green, 5%);
		}

		// Active state
		&.active,
		&:active {
			background-color: darken(green, 10%);
		}
	}


	%btn-secondary {
		color: #fff;
		border-color: darken(red, 10%);
		background-color: red;

		// Hover/focus state
		&:hover,
		&:focus {
			background-color: darken(red, 5%);
		}

		// Active state
		&.active,
		&:active {
			background-color: darken(red, 10%);
		}
	}

	%btn-warning {}
	%btn-danger {}
	%btn-info {}
	%btn-success {}
	%btn-inverse {}

	// Generic style for buttons used by the scripts
	%btn-scripts {
		@include alpha-color(#000, .6, background);
		color: #fff;
		cursor: pointer;
		display: block;
		text-align: center;
		text-decoration: none;

		&:hover {
			color: #fff;
			@include alpha-color(#000, .8, background);
		}
	}


	// Captions
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%caption {
		@include alpha-color(#000, .8, background);
		color: #fff;
		padding: $captions-padding;
	}

	// Pills (Labels & Badges)
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%pill {
		background-color: $gray;
		color: $white;
	}

	// Dropdowns
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%dropdown {
		background: $grayLighter;
		border-color: $gray;

		.divider { @include nav-divider($gray); margin-top: -1px }

		> li > a { border-bottom: 1px dotted $gray; }

		> li > a:hover,
		> li > a:focus {
		// .dropdown-submenu:hover > a,
		// .dropdown-submenu:focus > a {
			text-decoration: none;
			background-color: $grayLight;
		}
	}

	%dropdown-open {
		background: $grayLighter;
	    &:after {background-color: $grayLighter;}
	}


	// Caret per Dropdown e Select
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	$caret-width: em(12px);

	%caret {
		min-width: $caret-width;
		&:after {
			@include triangle($caret-width, $gray, down);
			margin-top: -($caret-width / 4);
		}
	}


	// Tables
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%table-bordered {
		thead {
			th, td {
				background-color: $gray;
				color: #FFF;
			}
		}
		tbody {
			td { border-bottom: 1px solid $grayLight; }
		}
	}

	%table-striped { background-color: $grayLighter;}

	%table-hover { background-color: $gray;}

	%table-sortable {
		thead {
			th {
				&:hover {background: $grayDark }
				&.sorting-asc:after {content: "\25BC"; }
				&.sorting-desc:after {content: "\25B2";}
			}
		}
	}

	// Navs
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%nav-btn {}

	%nav-btn_hover { background-color: $grayLighter;}

	%nav-btn_active {
		color: $white;
		background-color: $link-color;
	}

	%nav-btn_disabled {color: $grayLight;}


	// Breadcrumbs
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%breadcrumb {
		> li {
			&:after {
				color: #ccc;
				content: "›";
				padding: 0 10px;
			}
			&:last-child {
				&:after {
					content: "";
					padding-right: 0;
				}
			}
		}
		.active { color: $grayLight; }
	}

	// Pagination
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%pagination_btn {
		  background-color: $grayLight;
		  border-color: $gray;
	}

	%pagination_btn-hover {
		  background-color: $grayLighter;
	}

	%pagination_btn-active {
		  color: #fff;
		  background-color: $gray;
	}

	%pagination_btn-disabled {
		  color: $grayLight;
		  background-color: transparent;
		  border-color: $grayLight;
	}


	// Pager
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	%pager-btn {
		  background-color: $grayLight;
		  border-color: $gray;
	}

	%pager-btn_hover {
		background-color: $grayLighter;
	}

	%pager-btn_disabled {
		  color: $grayLight;
		  background-color: #fff;
		  border-color: $grayLight;
	}



	// Loader icon
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	$loader-ico-size: 44px;

	%loader-ico { background: url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif') center center no-repeat; }

	// Modals
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	$modal-btn-size: em(30px);

	// Buttons
	%modal-btn {
		@extend %btn-scripts !optional;
		@include square($modal-btn-size);
		line-height: $modal-btn-size;
	}

	%modal-close {
		@include position(absolute, 0px (em(-5px) - $modal-btn-size) 0 0);
	}

	%modal-close-alt {
		@include position(absolute, 0px 0px 0 0);
		background-color: transparent;
		color: $link-color;
		&:hover {
			color: $link-color-hover;
		}
	}

	%modal-btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}

	// Other styles
	%modal-overlay { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII='); }

	%modal-skin {
		@include box-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
		@include border-radius($base-border-radius);
		background: #fff;

		// Icons
		.fancybox-close:after 		{ @include icon-font(\f00d); }
		.fancybox-prev span:after 	{ @include icon-font(\f053); }
		.fancybox-next span:after 	{ @include icon-font(\f054); }
		.btnPrev:after 				{ @include icon-font(\f04a); }
		.btnNext:after 				{ @include icon-font(\f051); }
		.btnPlay:after 				{ @include icon-font(\f04b); }
		.btnPlayOn:after 			{ @include icon-font(\f04c); }
		.btnToggle:after 			{ @include icon-font(\f065); }
		.btnToggleOn:after 			{ @include icon-font(\f066); }
		.btnClose:after 			{ @include icon-font(\f00d); }
	}

	%modal-nav { margin-top: (0 - ($modal-btn-size / 2)); }

	%modal-caption { @extend %caption !optional; }

	%modal-loading {
		margin-top: -($loader-ico-size / 2);
		margin-left: -($loader-ico-size / 2);
		opacity: 0.8;

		div {
			@extend %loader-ico !optional;
			@include square($loader-ico-size);

		}
	}


	// Sliders
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	$slider-btn-size: em(30px);

	// Buttons
	%slider-btn {
		@extend %btn-scripts !optional;
		@include square($slider-btn-size);
		line-height: $slider-btn-size;
		margin-top: -($slider-btn-size / 2);

		&.bx-prev i:after { @include icon-font(\f053); }
		&.bx-next i:after { @include icon-font(\f054); }
	}

	// Pager
	%slider-pager {
		@include position(absolute, 0 0 -30px 0);
		padding-top: 20px;
		.bx-pager-item {
			a {
				@include border-radius(5px);
				@include square(10px);
				@include hide-text;
				background: $grayLight;
				margin: 0 5px;
				&:hover, &.active { background: $gray; }
			}
		}
	}

	// Other styles
	%slider-caption { @extend %caption !optional; }

	%slider-loading {
		@extend %loader-ico !optional;
		@include alpha-color(#000, .60);
		min-height: $loader-ico-size;
	}

	// Tabs
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	%tab-nav {
		//...
	}

	%tab-btn {
		background: $grayLighter;
		border: solid 1px $grayLight;
		border-bottom: none;
	}

	%tab-btn_hover {
		background: $grayLighter;
		border: solid 1px $grayLight;
		border-bottom: none;
	}

	%tab-btn_current {
		border-color: $gray;
		&:after { background: $grayLighter; }
	}

	%tab-container {
		border: solid 1px $gray;
		background: $grayLighter;
	}


	// Alerts
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	%alert {
		background-color: $grayLighter;
		border: 1px solid $grayLight;
	}

	// Responsive NAV
	// ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	%nav-big {}

	%nav-small {
		background-color: #272c33;

		a {
			color: #fff;
			padding: $input-padding;
			// &:after { display: none;}
		}

		ul,
		ul li,
		ul li a {
			width: 100%;
			border: 0;
			margin: 0;
			float: none;
			display: block;
			position: static;
			text-align: left;
			@include border-radius(0);
			background-color: transparent;
		}

		.open {
			background-color: lighten(#272c33, 10);

			.btn.dropdown-toggle[data-toggle=dropdown] {
				background-color: darken(#272c33, 10);
			}
		}
	}

	%nav-toggle {
		@extend .btn;
		@include square($responsive-nav-toggle-size);
		font-size: $responsive-nav-toggle-size * .6;
		padding: 0;
		line-height: $responsive-nav-toggle-size;
		span {@include hide-text();}
		&:before {
			@include icon-font(\f0c9);
		}
	}

}