/* 05.36. WordPress Widgets */

// scss-lint:disable SelectorFormat

/* Text Widget */
.widget_black-studio-tinymce,
.widget_text {
	font-family: $secondary-font;
	font-size: 14px;

	select,
	img {
		max-width: 100%;
		height: auto;
	}

	.featured-widget {
		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}
}

/* Calendar Widget */
.widget_calendar {
	table {
		width: 100%;
	}

	caption {
		font-family: $secondary-font;
		background-color: $primary-color;
		border-radius: 2px;
		color: #ffffff;
		padding: 5px 0;
		text-align: center;
	}

	thead {
		tr {
			th {
				padding: 5px 0;
				text-align: center;
				background-color: rgba(0, 0, 0, .1);
				color: $text-color;
				border: 1px solid rgba(0, 0, 0, .05);
			}
		}
	}

	tbody {
		tr {
			td {
				text-align: center;
				border: 1px solid rgba(0, 0, 0, .05);
				padding: 3px 0;
			}
		}
	}

	tfoot {
		tr {
			td {
				padding: 5px;

				&:last-of-type {
					a {
						float: right;
					}
				}
			}
		}
	}
}

/* Tag Cloud Widget */
.widget_tag_cloud {
	a {
		display: inline-block;
		padding: 6px 10px 4px;
		margin: 2px 0;
		background-color: #eeeeee;
		color: #aaaaaa;
		border-radius: 2px;
		text-transform: uppercase;
		font-weight: bold;
		transition: $primary-transition;

		&:hover {
			background-color: darken(#eeeeee, 5);
			color: darken($text-color, 5);
			text-decoration: none;
		}
	}
}

/* Search Widget */
.widget_search {
	font-family: $primary-font;

	label {
		width: 100%;
		margin-bottom: 5px;

		@media (min-width: $screen-md-min) {
			float: left;
			width: 75%;
			margin-bottom: 0;
		}
	}

	.search-field {
		width: 100%;
		border: 1px solid rgba(0, 0, 0, .1);
		background-color: $light-color;
		padding: 6px 5px 6px 20px;
		font-weight: normal;
		height: 60px;
		border-radius: 2px;
		transition: $primary-transition;
		outline: none;

		@media (min-width: $screen-md-min) {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right: 0;
		}

		&:focus {
			background-color: #ffffff;
			border: 1px solid rgba(0, 0, 0, .2);
			border-radius: 2px;

			@media (min-width: $screen-md-min) {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-right: 0;
			}
		}
	}

	.search-submit {
		width: 100%;
		height: 60px;
		background-color: $primary-color;
		font-family: $secondary-font;
		text-transform: uppercase;
		border: 0;
		color: #ffffff;
		border-radius: 2px;
		padding-top: 3px;
		transition: $primary-transition;

		@media (min-width: $screen-md-min) {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			width: 25%;
		}

		.fa {
			vertical-align: 0;
		}

		&:hover,
		&:focus {
			background-color: darken($primary-color, 5);
		}

		&:active {
			background-color: darken($primary-color, 8);
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
		}
	}

	.sidebar__headings {
		margin-bottom: 20px;
	}
}

/* Widgets With Lists */
.widget_archive,
.widget_pages,
.widget_meta,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss {
	ul {
		padding-left: 15px;
		padding-right: 15px;
	}

	a {
		word-wrap: break-word;
	}
}

/* Categories */
.widget_categories {
	ul {
		list-style: none;
		padding: 0;
	}

	li {
		position: relative;

		&::before {
			position: absolute;
			content: '';
			background-color: rgba(0, 0, 0, .1);
			top: 0;
			left: 0;
			right: 0;
			height: 1px;
		}

		&::after {
			position: absolute;
			content: '\f0da';
			font-family: 'FontAwesome';
			right: 0;
			top: 20px;
			color: #dddddd;
		}
	}

	> ul > li:first-of-type::before {
		display: none;
	}

	a {
		display: inline-block;
		color: #aaaaaa;
		padding: 19px 0;
		font-weight: bold;
		text-transform: uppercase;

		&:hover {
			text-decoration: none;
			color: #666666;
		}
	}

	.children {
		a {
			padding-left: 20px;
		}

		.children a {
			padding-left: 40px;
		}
	}

	// Specific  colors for footer.
	.footer-top & {
		a {
			color: #aab5c9;

			&:hover {
				color: darken(#aab5c9, 5);
			}
		}

		li {
			&::after {
				color: rgba(250, 250, 250, .3);
			}
		}
	}
}

/* Custom Menu */
.widget_nav_menu {
	ul {
		@include list-unstyled; // mixin from BS
	}

	.menu {
		a {
			display: block;
			font-family: $secondary-font;
		}
	}
}

.footer-top {
	.widget_nav_menu {
		.menu {
			a {
				line-height: 1.9;
				color: #aab5c9;
				margin: 3px 0;
			}
		}

		.sub-menu {
			padding-left: 15px;
			margin: 0;
		}
	}
}

.sidebar {
	.widget_nav_menu {
		.menu { // topmost UL
			padding: 5px;
			background-color: $light-color;
			border-radius: 2px;

			a {
				display: block;
				padding: 19px 20px;
				text-transform: uppercase;
				color: #aaaaaa;
				font-weight: bold;
				margin: 0;

				&:focus,
				&:hover {
					text-decoration: none;
					color: $headings-color;
				}
			}

			> li:first-of-type::before { // no top border for the first item
				display: none;
			}

			li { // generic li
				position: relative;

				&::before { // line after (actually before) each list item
					content: '';
					position: absolute;
					height: 1px;
					top: -1px;
					left: 15px;
					right: 15px;
					background-color: #e0e0e0;
				}

				&.current-menu-item { // no line above currently selected item
					&::before {
						display: none;
					}

					> a {
						position: relative;
						background: #ffffff;
						color: $primary-color;
						box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
						border-radius: 2px;
					}

					+ .menu-item::before {
						display: none; // hack to hide the line below currenty selected item
					}
				}
			}
		}

		.sub-menu {
			a {
				padding-left: 40px;
			}

			.sub-menu a {
				padding-left: 60px;
			}
		}
	}
}