/* 05.32. WordPress Widgets */

// scss-lint:disable SelectorFormat, NestingDepth, SelectorDepth

/* Applies to all widgets */
.widget {
	select,
	img {
		max-width: 100%;
		height: auto;
	}
}

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

	caption {
		font-family: $tertiary-font;
		letter-spacing: $tertiary-font-letter-spacing;
		background-color: $brand-primary;
		color: #ffffff;
		padding: ptr(5) 0;
		text-align: center;
		border-radius: $border-radius;
		caption-side: inherit;
	}

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

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

	tfoot {
		td {
			padding: ptr(5);

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

/* Tag Cloud Widget */
.widget_tag_cloud {
	a {
		display: inline-block;
		padding: ptr(2) ptr(8) 0;
		margin: ptr(2) 0;
		font-family: $tertiary-font;
		letter-spacing: $tertiary-font-letter-spacing;
		font-weight: bold;
		text-transform: uppercase;
		border: 2px solid $gray-light;
		color: $gray-light;
		transition: $primary-transition;

		&:focus,
		&:hover {
			color: $gray-dark;
			border-color: $gray-dark;
			text-decoration: none;
		}
	}
}

/* Search Widget */
.widget_search {
	label {
		position: relative;
		width: 100%;
		margin-bottom: 0;

		&::before,
		&::after {
			position: absolute;
			z-index: 10;
			content: '';
			width: 1px;
			height: calc(100% - 10px);
			background-color: #ffffff;
			top: 0;
		}

		&::before {
			left: 0;
		}

		&::after {
			right: 0;
		}
	}

	.search-form {
		position: relative;
	}

	.search-field {
		position: relative;
		z-index: 5;
		display: block;
		height: ptr(60);
		background-color: #ffffff;
		padding-left: ptr(25);
		padding-right: ptr(60);
		font-size: ptr(16);
		border-top: 1px solid transparent;
		border-bottom: 1px solid #dddddd;
		border-left: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
		transition: $primary-transition;

		&:focus {
			background-color: #f2f2f2;
			color: $gray-dark;
			border-top: 1px solid transparent;
			border-bottom: 1px solid $gray-dark;
			border-left: 1px solid $gray-dark;
			border-right: 1px solid $gray-dark;
		}
	}

	.search-submit {
		position: absolute;
		z-index: 20;
		right: 0;
		top: 0;
		padding: ptr(15) ptr(25);
		border: 0;
		background-color: transparent;
		color: #dddddd;

		.fa {
			font-size: ptr(18);
		}
	}

	.header__navigation-widgets & {
		.search-field {
			height: ptr(44);
		}

		.search-submit {
			padding: ptr(7) ptr(25);
		}
	}
}

/* Widgets With Lists */
.widget_archive,
.widget_pages,
.widget_categories,
.widget_meta,
.widget_recent_comments,
.widget_recent_entries,
.widget_rss {
	ul {
		padding-left: ptr(20);
		padding-right: ptr(20);
	}

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

/* Categories widget */
.widget_categories,
.widget_meta {
	ul {
		@include list-unstyled;
		padding-right: 0;
	}

	li {
		position: relative;
		font-size: ptr(12);

		&::before {
			position: absolute;
			content: '\f105';
			font-family: 'FontAwesome';
			right: ptr(7);
			top: ptr(13);
		}

		&::after {
			position: absolute;
			content: '';
			background-color: $gray-lighter;
			width: 100%;
			height: 1px;
			left: 0;
			top: ptr(45);
		}
	}

	a {
		display: inline-block;
		text-transform: uppercase;
		color: $gray-light;
		font-weight: bold;
		font-family: $tertiary-font;
		letter-spacing: $tertiary-font-letter-spacing;
		margin-right: ptr(5);
		padding: ptr(13) 0;

		&:hover {
			color: $gray-dark;
			text-decoration: none;
		}
	}

	.children a {
		padding-left: ptr(15);
	}

	.children .children a {
		padding-left: ptr(30);
	}

	.children .children .children a {
		padding-left: ptr(45);
	}
}

/* Images in text widgets. */
.textwidget {
	font-size: ptr(16);

	a > img {
		&.alignright,
		&.alignnone,
		&.alignleft,
		&.aligncenter {
			margin-top: 0;
		}
	}

	> p:last-of-type {
		margin-bottom: 0;
	}
}

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

	.sub-menu {
		padding-left: ptr(10);
	}
}

.top {
	.widget_nav_menu {
		.menu {
			margin: 0;
			padding: 0;

			> .menu-item {
				position: relative;
				display: inline-block;

				&:focus,
				&:hover,
				&[aria-expanded="true"] {
					> .sub-menu {
						visibility: visible;
						opacity: 1;
						z-index: 1;
					}
				}

				&:first-of-type {
					> a {
						padding-left: 0;
					}
				}

				&:last-of-type {
					> a {
						padding-right: 0;
					}
				}
			}

			a {
				display: block;
				padding: ptr(7) ptr(8);
				color: #999999;

				&:focus,
				&:hover {
					color: darken(#999999, 5);
					text-decoration: none;
				}
			}

			.sub-menu {
				position: absolute;
				visibility: hidden;
				padding: 0;
				opacity: 0;
				left: ptr(-5);

				.menu-item {
					display: block;
					text-align: left;

					// 2. level sub menus are open on :hover.
					&:focus,
					&:hover,
					&[aria-expanded="true"] {
						> .sub-menu {
							visibility: visible;
							opacity: 1;
						}
					}

					&:last-of-type {
						> a {
							border-bottom: 0;
						}
					}
				}

				a {
					display: block;
					white-space: nowrap;
					background-color: $gray-dark;
					padding: ptr(5) ptr(30) ptr(5) ptr(15);
					min-width: ptr(80);
					border-bottom: 1px solid rgba(250, 250, 250, .05);
				}

				// 2. level + are opening next to each other.
				.sub-menu {
					left: 100%;
					top: 0;

					a {
						border-left: 1px solid rgba(250, 250, 250, .05);
					}
				}
			}
		}
	}
}

.sidebar {
	.widget_nav_menu {
		.menu {
			margin: 0;
			padding: 0;
			border: 1px solid $gray-lighter;

			> .menu-item {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					background-color: $gray-lighter;
					right: ptr(30);
					left: ptr(30);
					top: -1px;
					height: 1px;
				}

				&:first-of-type {
					&::after {
						display: none;
					}
				}

				> a {
					position: relative;

					&::after {
						position: absolute;
						content: '\f105';
						font-family: 'FontAwesome';
						right: 30px;
					}
				}
			}

			> .current-menu-item {
				> a {
					background-color: $gray-lightest;
					color: $gray-dark;
				}

				&::after {
					display: none;
				}
			}

			> .menu-item-has-children {
				> a {
					&::after {
						content: '\f107';
					}
				}

				&::before {
					position: absolute;
					content: '';
					background-color: $gray-lighter;
					right: ptr(30);
					left: ptr(30);
					top: ptr(59);
					height: 1px;
				}
			}
		}

		a {
			display: block;
			text-transform: uppercase;
			padding: ptr(20) ptr(30);
			color: $gray-light;
			font-family: $tertiary-font;
			letter-spacing: $tertiary-font-letter-spacing;
			font-weight: bold;
			font-size: ptr(12);

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

		.sub-menu {
			padding: ptr(13) 0;

			a {
				padding: ptr(5) ptr(30);
				text-transform: inherit;
				font-family: $primary-font;
				font-weight: normal;
				font-size: ptr(14);
			}

			.sub-menu {
				padding: 0;

				a {
					padding-left: ptr(45);
				}

				.sub-menu a {
					padding-left: ptr(60);
				}
			}
		}
	}
}