/*--------------------------------------------------------------
# Widget
--------------------------------------------------------------*/
.widget {
	margin-bottom: 30px;

	select {
		max-width: 100%;
	}

	.search-form {
		box-sizing: border-box;
	}

	.widget-search .search-submit {
		@include screen-reader-text();
	}

	.widget-title,
	.widgettitle {
		font-family: $widget-font;
		font-size: 20px;
		letter-spacing: 0;
		padding-bottom: 0;
		margin-bottom: ms(-1);
		font-weight: 700;
		text-transform: uppercase;
	}

	ul {
		margin-left: 0;
		list-style: none;

		ul {
			margin-left: ms(3);
		}
	}
}

.widget-area {
	.widget {
		font-weight: 400;

		a.button {
			font-weight: 600 !important;
		}
	}
}

.widget_search,
.widget_product_search {
	form {
		position: relative;

		input[type=text],
		input[type=search] {
			width: 100%;
		}

		input[type=submit],
		button[type=submit] {
			@include screen-reader-text();
			top: 0;
			left: 0;
		}
	}
}

.widget_recent_entries,
.widget_pages,
.widget_categories,
.widget_archive,
.widget_recent_comments,
.widget_nav_menu,
.widget_links,
.widget_product_categories,
.widget_layered_nav,
.widget_layered_nav_filters {
	ul {
		margin: 0;
		padding: 0;

		li {
			list-style: none;
			margin-bottom: 12px;
			line-height: 22px;
		}

		.children {
			margin-top: ms(-2);
			margin-left: ms(3);
		}

		.children {
			margin-left: 0;
			margin-top: ms(1);
		}
	}
}

.widget-area,
.footer-widgets {
	#wp-calendar {
		th,
		td {
			padding: .236em;
			text-align: center;
		}
	}
}

.widget_recent_entries,
.widget_pages {
	ul {
		ul.children {
			margin: ms(-2) 0 0 ms(2);
		}
	}
}

.widget_rating_filter {
	.wc-layered-nav-rating  {
		margin-bottom: ms(-2);

		a {
			text-decoration: none !important;
		}

		.star-rating {
			display: inline-block;
			height: 1em;
			line-height: 1;
		}
	}
}

.widget-area {
	.widget {
		font-size: ms(-1);

		h1.widget-title {
			font-size: ms(2);
		}

		a:not(.button) {
			@include underlinedLink();
		}
	}
}

/*--------------------------------------------------------------
# Widget Footer
--------------------------------------------------------------*/
.footer-widgets {

	a {

		@include transition();

		&:hover {
			color: $black-70;
			text-decoration: underline;
		}
	}

}

/*--------------------------------------------------------------
# Search Widget
--------------------------------------------------------------*/
.widget_search {

	input[type=search] {

		&:focus {

			background: #dcdcdc;
		}
	}

}