// @flow
import React from 'react'
import styled from 'styled-components'
import * as theme from '../theme'
import Spinner from 'react-spinkit'

const Wrapper = styled.figure`
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column nowrap;
`

const Message = styled.figcaption`
	font-weight: 300;
	margin-top: 1em;
	color: ${theme.gray};

	&.info {
		color: ${theme.green};
	}
	&.warning {
		color: ${theme.orange};
	}
	&.error {
		color: ${theme.red};
	}
`

type LoadingProps = {
	children?: any,
	className?: string,
}

export default function Loading({className, children}: LoadingProps) {
	return (
		<Wrapper>
			<Spinner name="wave" color={theme.gray600} fadeIn="none" />
			<Message className={className}>{children}</Message>
		</Wrapper>
	)
}

@@ -359,21 +359,19 @@
 or: 
-$%7Btheme.
+var(--
 gray
-%7D
+)
 ;%0A%0A%09
@@ -392,22 +392,20 @@
 or: 
-$%7Btheme.
+var(--
 green
-%7D
+)
 ;%0A%09%7D
@@ -431,23 +431,21 @@
 or: 
-$%7Btheme.
+var(--
 orange
-%7D
+)
 ;%0A%09%7D
@@ -469,20 +469,18 @@
 or: 
-$%7Btheme.red%7D
+var(--red)
 ;%0A%09%7D
@@ -637,16 +637,38 @@
 %3CWrapper
+ className=%7BclassName%7D
 %3E%0A%09%09%09%3CSp
@@ -735,38 +735,16 @@
 %3CMessage
- className=%7BclassName%7D
 %3E%7Bchildr

move className on Loading to the wrapper and use css variables