// Miscellaneous assembly
// Remember to use this for similar things that need to be consistent, not
// for things that are basically the same thing repeated, which should use
// a shared class instead.

// To hide objects, but keep them accessible for screen-readers
.hidden() {
	position: absolute;
	top: -9999px;
	left: 0;
}

// Icons - hides labels, but keep them accessible for screen-readers
.icon() {
	text-indent: -99999px;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
}

.box() {
	background: @base90;
	border: solid @base80;
	border-width: 1px 1px @border;
	padding: 1.25em 1.75em;
	box-shadow: 0 1px 2px 1px rgba( 0, 0, 0, 0.02 );
}

.unbox() {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

// Icons for the page actions menus
.ca-icon() {
	.icon;
	display: inline-block;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	margin-bottom: -0.5em;
}

// Navigation column blocks

.nav-block() {
	.box();
	padding: 1.5em 1.5em 0;
	margin: 1em 0;
	line-height: 1.125;
	word-wrap: break-word;
	font-size: 0.95em;

	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	h3 {
		font-weight: normal;
		font-size: 1em;
		margin: 0.25em 0 0.75em 0;
		padding-bottom: 0.15em;
		border-bottom: solid 2px @base70;
	}

	ul {
		margin-bottom: 2em;
	}

	li {
		padding: 0.25em 0;
	}
}

.column-right() {
	padding-left: 1em;
	box-sizing: border-box;

	.sidebar-chunk {
		.nav-block();
	}
}

.column-left() {
	padding-right: 1em;
	box-sizing: border-box;

	.sidebar-chunk {
		.nav-block();
	}
}

// Dropdowns
.dropdown-header() {
	cursor: pointer;
	margin-bottom: -1em;
	padding-bottom: 1em;

	&:after {
		display: inline-block;
		content: '';
		width: 22px;
		height: 12px;
		.background-image-svg( 'images/arrow-down-grey.svg', 'images/arrow-down-grey.png' );
		background-position: center center;
		background-repeat: no-repeat;
	}
}

.dropdown-menu( @direction: right ) {
	.nav-block();
	background: @background;
	box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.05 );
	position: absolute;
	padding: 20px 2em 0;
	margin: 0;
	min-width: 9.153em;
	top: 2.95em;
	@{direction}: -1em;
	overflow: visible;
	z-index: 3;
}

// Categories on bottom of page

.categories-bottom() {
	#catlinks-sidebar {
		display: none;
	}

	#catlinks {
		margin: 0 @content-padding;
		padding: 1.5em 0 0.5em;

		li {
			border-left: 0;
		}

		div {
			margin: 0 0 0.35em;
		}
	}
}