CSS: Split into modules

Don't place pure styling on top-level files (those that don't begin with underscore).
Instead, import them as individual files.

src/styles/components/_search.sass

@@ -0,0 +1,92 @@
+#search-overlay
+	position: absolute
+	top: 0
+	left: 0
+	right: 0
+	bottom: 0
+	width: 100%
+	height: 100%
+	pointer-events: none
+	visibility: hidden
+	opacity: 0
+	z-index: $z-index-base + 4
+	transition: opacity 150ms ease-in-out
+
+	&.active
+		opacity: 1
+		visibility: visible
+		background-color: rgba($color-background-nav, .7)
+
+.search-input
+	+media-lg
+		max-width: 350px
+	+media-md
+		max-width: 350px
+	+media-sm
+		max-width: 120px
+	+media-xs
+		display: block
+		margin: 0 10px
+		position: absolute
+		z-index: $z-index-base
+		right: 5px
+	position: relative
+	float: left
+	padding: 0
+	margin: 0
+
+
+	.search-icon
+		position: absolute
+		color: white
+		top: 4px
+		left: 10px
+		cursor: pointer
+
+		&:after
+			opacity: 0
+			content: 'Use advanced search...'
+			font-style: normal
+			background: darken($color-background-nav, 5%)
+			color: $color-text-light-primary
+			box-shadow: 1px 1px 3px rgba(black, .4)
+			padding: 3px 10px
+			font-size: .85em
+			border-radius: 3px
+			top: 30px
+			left: -10px
+			width: 150px
+			position: absolute
+			transition: top 150ms ease-in-out, opacity 150ms ease-in-out
+			pointer-events: none
+
+		&:hover
+			&:after
+				opacity: 1
+				top: 35px
+
+
+	#cloud-search, .tt-hint
+		+text-overflow-ellipsis
+		border: thin solid $color-background
+		border-radius: 3px
+		font:
+			size: 1em
+			weight: 400
+		margin: 0
+		min-height: 32px
+		outline: none
+		padding: 0 20px 0 40px
+		transition: border 100ms ease-in-out
+
+		&:focus
+			box-shadow: none
+			border: none
+
+		&::placeholder
+			color: rgba($color-text, .5)
+			transition: color 150ms ease-in-out
+
+		&:hover
+			&::placeholder
+				color: rgba($color-text, .6)