/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 */


// CONFIG
$spinnerSize: 32px

// MIXINS
@mixin prefix ( $property, $value )
	-webkit-#{$property}: $value
	-moz-#{$property}: $value
	-ms-#{$property}: $value
	-o-#{$property}: $value
	#{$property}: $value

@mixin transition( $value )
	-webkit-transition: $value !important // important to override bootstrap
	-moz-transition: $value !important
	-ms-transition: $value !important
	-o-transition: $value !important
	transition: $value !important

@mixin vendor-transform( $value )
	@include prefix( transform, $value )

@mixin transform-origin( $value )
	@include prefix( transform-origin, $value )

@mixin buttonColor( $name, $color )
	&[data-color=#{$name}]
		background: $color
		&:hover
			background-color: lighten( $color, 5% )

// BUTTON BASE
.ladda-button
	position: relative
	.ladda-spinner
		position: absolute
		z-index: 2
		display: inline-block
		width: $spinnerSize
		height: $spinnerSize
		top: 50%
		margin-top: -$spinnerSize/2
		opacity: 0
		pointer-events: none

	.ladda-label
		position: relative
		z-index: 3

	.ladda-progress
		position: absolute
		width: 0
		height: 100%
		left: 0
		top: 0
		background: rgba( 0, 0, 0, 0.2 )
		visibility: hidden
		opacity: 0
		@include transition( 0.1s linear all )
		&[data-loading] .ladda-progress
			opacity: 1
			visibility: visible

// EASING
.ladda-button, .ladda-button .ladda-spinner, .ladda-button .ladda-label
	@include transition( 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275) background-color )
.ladda-button[data-style=zoom-in],
.ladda-button[data-style=zoom-in] .ladda-spinner,
.ladda-button[data-style=zoom-in] .ladda-label,
.ladda-button[data-style=zoom-out],
.ladda-button[data-style=zoom-out] .ladda-spinner,
.ladda-button[data-style=zoom-out] .ladda-label
	@include transition( 0.3s ease all )

// EXPAND LEFT
.ladda-button[data-style=expand-right]
	.ladda-spinner
		right: 14px
	&[data-size="s"] .ladda-spinner,
	&[data-size="xs"] .ladda-spinner
		right: 4px
	&[data-loading]
		padding-right: 56px
		.ladda-spinner
			opacity: 1
		&[data-size="s"],
		&[data-size="xs"]
			padding-right: 40px

// EXPAND RIGHT
.ladda-button[data-style=expand-left]
	.ladda-spinner
		left: 14px
	&[data-size="s"] .ladda-spinner,
	&[data-size="xs"] .ladda-spinner
		left: 4px
	&[data-loading]
		padding-left: 56px
		.ladda-spinner
			opacity: 1
		&[data-size="s"],
		&[data-size="xs"]
			padding-left: 40px

// EXPAND UP
.ladda-button[data-style=expand-up]
	overflow: hidden
	.ladda-spinner
		top: -$spinnerSize
		left: 50%
		margin-left: -$spinnerSize/2
	&[data-loading]
		padding-top: 54px
		.ladda-spinner
			opacity: 1
			top: 14px
			margin-top: 0
		&[data-size="s"],
		&[data-size="xs"]
			padding-top: 32px
			.ladda-spinner
				top: 4px


// EXPAND DOWN
 .ladda-button[data-style=expand-down]
 	overflow: hidden
 	.ladda-spinner
 		top: 62px
 		left: 50%
 		margin-left: -$spinnerSize/2
 	&[data-size="s"] .ladda-spinner,
 	&[data-size="xs"] .ladda-spinner
 		top: 40px
 	&[data-loading]
 		padding-bottom: 54px
 		.ladda-spinner
 			opacity: 1
 		&[data-size="s"]
 		&[data-size="xs"]
 			padding-bottom: 32px


// SLIDE LEFT
.ladda-button[data-style=slide-left]
	overflow: hidden
	.ladda-label
		position: relative
	.ladda-spinner
		left: 100%
		margin-left: -$spinnerSize/2
	&[data-loading]
		.ladda-label
			opacity: 0
			left: -100%
		.ladda-spinner
			opacity: 1
			left: 50%

// SLIDE RIGHT
.ladda-button[data-style=slide-right]
	overflow: hidden
	.ladda-label
		position: relative
	.ladda-spinner
		right: 100%
		margin-left: -$spinnerSize/2
	&[data-loading]
		.ladda-label
			opacity: 0
			left: 100%
		.ladda-spinner
			opacity: 1
			left: 50%


// SLIDE UP
.ladda-button[data-style=slide-up]
	overflow: hidden
	.ladda-label
		position: relative
	.ladda-spinner
		left: 50%
		margin-left: -$spinnerSize/2
		margin-top: 1em
	&[data-loading]
		.ladda-label
			opacity: 0
			top: -1em
		.ladda-spinner
			opacity: 1
			margin-top: -$spinnerSize/2


// SLIDE DOWN
.ladda-button[data-style=slide-down]
	overflow: hidden
	.ladda-label
		position: relative
	.ladda-spinner
		left: 50%
		margin-left: -$spinnerSize/2
		margin-top: -2em
	&[data-loading]
		.ladda-label
			opacity: 0
			top: 1em
		.ladda-spinner
			opacity: 1
			margin-top: -$spinnerSize/2

// ZOOM-OUT
.ladda-button[data-style=zoom-out]
	overflow: hidden
	.ladda-spinner
		left: 50%
		margin-left: -$spinnerSize/2
		@include vendor-transform( scale( 2.5 ) )
	.ladda-label
		position: relative
		display: inline-block
	&[data-loading] .ladda-label
		opacity: 0
		@include vendor-transform( scale( 0.5 ) )
	&[data-loading] .ladda-spinner
		opacity: 1
		@include vendor-transform( none )


// ZOOM-IN
.ladda-button[data-style=zoom-in]
	overflow: hidden
	.ladda-spinner
		left: 50%
		margin-left: -$spinnerSize/2
		@include vendor-transform( scale( 0.2 ) )
	.ladda-label
		position: relative
		display: inline-block
	&[data-loading] .ladda-label
		opacity: 0
		@include vendor-transform( scale( 2.2 ) )
	&[data-loading] .ladda-spinner
		opacity: 1
		@include vendor-transform( none )


// CONTRACT
.ladda-button[data-style=contract]
	overflow: hidden
	width: 100px
	.ladda-spinner
		left: 50%
		margin-left: -16px

.ladda-button[data-style=contract][data-loading]
	border-radius: 50%
	width: 52px
	.ladda-label
		opacity: 0
	.ladda-spinner
		opacity: 1


// OVERLAY
.ladda-button[data-style=contract-overlay]
	overflow: hidden
	width: 100px
	box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0)
	.ladda-spinner
		left: 50%
		margin-left: -16px
	&[data-loading]
		border-radius: 50%
		width: 52px
		/*outline: 10000px solid rgba( 0, 0, 0, 0.5 );*/
		box-shadow: 0px 0px 0px 3000px rgba(0,0,0,0.8)
		.ladda-label
			opacity: 0
		.ladda-spinner
			opacity: 1

// THEME
$red: #ea8557
$purple: #9973C2
$mint: #16a085
$green: #2aca76
$blue: #53b5e6

.ladda-button
	&[disabled],
	&[data-loading]
		border-color: rgba( 0, 0, 0, 0.07 )
		cursor: default
		background-color: #999
		&:hover
			cursor: default
			background-color: #999
	&[data-size=xs]
		padding: 4px 8px
		.ladda-label
			font-size: 0.7em
	&[data-size=s]
		padding: 6px 10px
		.ladda-label
			font-size: 0.9em
	&[data-size=l] .ladda-label
		font-size: 1.2em
	&[data-size=xl] .ladda-label
		font-size: 1.5em