@require '~styles/variables'
@require '~styles-lib/mixins'

.loading
	theme-prop('color', 'light')
	font-size: $font-size-small
	text-transform: uppercase
	line-height: 20px
	margin-bottom: $font-size-base
	animation-delay: 250ms

	> img
		display: block
		margin-bottom: 5px

.loading-big
	font-size: $font-size-large
	font-weight: bold
	font-family: $font-family-heading

	img
		margin-bottom: 10px

.loading-centered
	text-align: center

	img
		margin-left: auto
		margin-right: auto

// Loading image sizing.
.loading > img
	width: 175px * 0.5
	height: 56px * 0.5

.loading-big > img
	width: 352px * 0.5
	height: 112px * 0.5

.loading-stationary > img
	width: 184px * 0.5

.loading-stationary.loading-big > img
	width: 368px * 0.5
