Group up existing components into elements

elements/StatusMessage/StatusMessage.pixy

@@ -0,0 +1,5 @@
+component StatusMessage
+	#status-message.fade.fade-out
+		#status-message-text
+		a.status-message-action.action(href="#", data-trigger="click", data-action="closeStatusMessage", aria-label="Close status message")
+			RawIcon("close")

elements/StatusMessage/StatusMessage.scarlet

@@ -0,0 +1,33 @@
+#status-message
+	horizontal
+	position fixed
+	bottom 0
+	left 0
+	width 100%
+	padding 0.5rem content-padding
+	pointer-events none
+	z-index 1000
+
+	&.fade-out
+		z-index 1
+
+#status-message-text
+	flex 1
+	text-align center
+	line-height content-line-height
+
+.status-message-action
+	color white !important
+	pointer-events auto !important
+	display flex
+	justify-content center
+	align-items center
+	margin-left 0.5rem
+
+.error-message
+	color white
+	background-color hsl(0, 75%, 50%)
+
+.info-message
+	color white
+	background tab-active-background