/** -----------------------------------------------------:[ 9.0 - Sidebars & Widgets ]:---------- */
.widget {
	> ul {
		margin-left: 1em;
	}
	select {
		max-width: 100%;
	}
	&_search .search-submit {
		display: none;
	}
	&_meta {
		ul {
			list-style: none;
			margin: 0;
		}
	}
	&_recent_entries,
	&_recent_comments {
		ul {
			margin: 0;
			list-style: none;
		}
		li {
			margin-bottom: 1em;
		}
	}
	&_recent_entries {
		.post-date {
			display: block;
			font-size: .9em;
			&:before {
				content: '\f017';
				font-family: 'fontawesome', arial;
				margin-right: 6px;
				margin-left: 2px;
				font-weight: 200;
				vertical-align: middle;
			}
		}
	}
}

/** ---:[ With JavaScript ]:--- */
.js {
	&.disable-scroll {
		overflow: hidden;
	}
	#secondary {
		overflow: scroll;
		position: fixed;
		top: 0;
		bottom: 100%;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1000;
		opacity: 0;
		color: @light;
		background: @dark;
		.transition( ~'opacity 300ms linear, bottom 0s linear 300ms' );
		.widget {
			margin-bottom: @spacing-base;
			&s-wrapper {
				.max-width( @max-width );
				.clearfix();
				@media screen and ( max-width: @max-width ) {
					padding-left: 2em;
					padding-right: 2em;
				}
			}
			@media screen and ( min-width: 500px ) {
				.column( 6 );
				&:nth-child( 2n+1 ) {
					clear: left;
					padding-right: unit( ( @spacing-base / 1.5 ), em );
				}
				&:nth-child( 2n+2 ) {
					padding-left: unit( ( @spacing-base / 1.5 ), em );
				}
			}
			@media screen and ( min-width: 800px ) {
				.column( 4 );
				&:nth-child( 2n+1 ) {
					clear: none;
				}
				&:nth-child( 3n+1 ) {
					clear: left;
					padding-right: unit( ( @spacing-base / 1.5 ), em );
				}
				&:nth-child( 3n+2 ) {
					padding-left: unit( ( @spacing-base / 3 ), em );
					padding-right: unit( ( @spacing-base / 3 ), em );
				}
				&:nth-child( 3n+3 ) {
					padding-left: unit( ( @spacing-base / 1.5 ), em );
				}
			}
			a {
				color: #FFF;
				&:hover {
					color: lighten( @dark, 30% );
				}
			}
			&-title {
				margin: 0 0 1em;
				color: #FFF;

			}
			&-area-toggle {
				display: block;
				width: 100%;
				margin-bottom: @spacing-base;
				padding: 1em;
				background-color: lighten( @dark, 5% );
				border-left: 0px solid @primary;
				border-bottom: 1px solid lighten( @dark, 5% );
				color: #FFF;
				.transition( ~'border 100ms linear' );
				.clearfix();
				&:hover,
				&:active {
					border-left-width: 3px;
				}
				i {
					float: right;
					margin-top: 5px;
				}
			}
		}
	}
	.widget {
		&-area-open {
			#secondary {
				bottom: 0;
				opacity: 1;
				.transition( ~'opacity 300ms linear, bottom 0s linear' );
			}
			#page {
				position: absolute;
				right: 0;
				left: 0;
				z-index: 0;
			}
			#primary,
			#masthead {
				.transition( ~'all 100ms linear 300ms' );
				.filter( blur( 10px ) );
			}
		}
	}
	.admin-bar {
		#secondary {
			top: 32px;
		}
	}
	@media screen and ( max-width: 782px ) {
		.admin-bar {
			#secondary {
				top: 46px;
			}
		}
	}
}

/** ---:[ Without JavaScript ]:--- */
.no-js {
	.widget {
		margin: 0 0 1.5em;
		&-area-toggle {
			display: none;
		}
	}
	#secondary {
		.column(4);
	}
	@media all and ( max-width: unit( ( @max-width * .8 ), px ) ) {
		#secondary {
			.column( 5 );
		}
	}
	@media all and ( max-width: unit( ( @max-width * .6 ), px ) ) {
		#secondary {
			.break-column();
		}
	}
}