Varia: Add styles to better support widgets in footer

varia/sass/components/_imports.scss

@@ -14,4 +14,4 @@
 @import "pagination/next-previous";
 @import "comments/comments";
 
-// @import "widgets/widgets";
+@import "widgets/widgets";

varia/sass/components/footer/_footer-branding.scss

@@ -10,6 +10,8 @@
 	@include media(tablet) {
 		order: 1;
 		flex: 1 0 50%;
+		margin-top: 0;
+		margin-bottom: 0;
 	}
 
 	.site-name {

varia/sass/components/footer/_footer-navigation.scss

@@ -5,6 +5,8 @@
 	@include media(tablet) {
 		flex: 1 0 50%;
 		order: 2;
+		margin-top: 0;
+		margin-bottom: 0;
 		text-align: right;
 	}
 

varia/sass/components/footer/_footer.scss

@@ -3,15 +3,10 @@
 	@include media(tablet) {
 		align-items: baseline;
 		display: flex;
+		flex-wrap: wrap;
 		justify-content: space-between;
-
-		& > * {
-			margin-top: 0;
-			margin-bottom: 0;
-		}
 	}
 }
 
-
 @import "footer-branding";
 @import "footer-navigation";

varia/sass/components/widgets/_widgets.scss

@@ -1,81 +1,4 @@
-.widget {
-	margin: 0 0 #{$size__spacing-unit};
-
-	/* Make sure select elements fit in widgets. */
-	select {
-		max-width: 100%;
-	}
-
-	a {
-		color: $color__link;
-
-		&:hover {
-			color: $color__link-hover;
-		}
-	}
-}
-
-.widget_archive,
-.widget_categories,
-.widget_meta,
-.widget_nav_menu,
-.widget_pages,
-.widget_recent_comments,
-.widget_recent_entries,
-.widget_rss {
-
-	ul {
-		padding: 0;
-		list-style: none;
-
-		li {
-			color: $color__text-light;
-			@include font-family( $font__heading );
-			font-size: calc(#{$font__size_base} * #{$font__size-ratio});
-			font-weight: 700;
-			line-height: $font__line-height-heading;
-			margin-top: #{0.5 * $size__spacing-unit};
-			margin-bottom: #{0.5 * $size__spacing-unit};
-		}
-
-		@include nestedSubMenuPadding();
-	}
-}
-
-.widget_tag_cloud {
-
-	.tagcloud {
-		@include font-family( $font__heading );
-		font-weight: 700;
-	}
-}
-
-
-.widget_search {
-
-	.search-field {
-		width: 100%;
-
-		@include media(mobile) {
-			width: auto;
-		}
-	}
-
-	.search-submit {
-		display: block;
-		margin-top: $size__spacing-unit;
-	}
-}
-
-.widget_calendar .calendar_wrap {
-	text-align: center;
-
-	table td,
-	table th {
-		border: none;
-	}
-
-	a {
-		text-decoration: underline;
-	}
+.widget-area {
+	// Ignore flexbox
+	flex: 0 0 100%;
 }

varia/style-rtl.css

@@ -2203,12 +2203,9 @@ table th,
 	.site-footer {
 		align-items: baseline;
 		display: flex;
+		flex-wrap: wrap;
 		justify-content: space-between;
 	}
-	.site-footer > * {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
 }
 
 .site-info {
@@ -2221,6 +2218,8 @@ table th,
 	.site-info {
 		order: 1;
 		flex: 1 0 50%;
+		margin-top: 0;
+		margin-bottom: 0;
 	}
 }
 
@@ -2248,6 +2247,8 @@ table th,
 	.footer-navigation {
 		flex: 1 0 50%;
 		order: 2;
+		margin-top: 0;
+		margin-bottom: 0;
 		text-align: left;
 	}
 }
@@ -2725,6 +2726,10 @@ table th,
 	font-weight: 600;
 }
 
+.widget-area {
+	flex: 0 0 100%;
+}
+
 /**
  * Site Pages
  * - Page specific styles

varia/style.css

@@ -2208,12 +2208,9 @@ table th,
 	.site-footer {
 		align-items: baseline;
 		display: flex;
+		flex-wrap: wrap;
 		justify-content: space-between;
 	}
-	.site-footer > * {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
 }
 
 .site-info {
@@ -2226,6 +2223,8 @@ table th,
 	.site-info {
 		order: 1;
 		flex: 1 0 50%;
+		margin-top: 0;
+		margin-bottom: 0;
 	}
 }
 
@@ -2253,6 +2252,8 @@ table th,
 	.footer-navigation {
 		flex: 1 0 50%;
 		order: 2;
+		margin-top: 0;
+		margin-bottom: 0;
 		text-align: right;
 	}
 }
@@ -2730,6 +2731,10 @@ table th,
 	font-weight: 600;
 }
 
+.widget-area {
+	flex: 0 0 100%;
+}
+
 /**
  * Site Pages
  * - Page specific styles