.box-shadow
	+box-shadow(0 8px 13px rgba(#111, 0))


.clear-fix
	&:after // clearfix
		content: ""
		display: table
		clear: both



/************** BUTTONS ************/

@mixin button-basic
	padding: .6rem 1rem
	display: inline-block
	line-height: .75rem
	letter-spacing: 0.07rem
	font-size: .75rem
	position: relative
	font-weight: 300
	text-transform: uppercase
	+transition-property(background, border-color)
	+transition-duration(.1s)
	color: $dark-grey
	background: #F8F8F8
	border: 1px solid darken( #F8F8F8 , 5%)
	font-family: $symbol-font-family, $main-font-family
	cursor: pointer
	&:hover
		border-color: darken( #F8F8F8 , 15%)
		text-decoration: none
		color: $dark-grey
	&.disabled
		opacity: .5
		color: #999
		background-color: $bloc-background-color
		&:hover
			color: #666
			+box-shadow(1px 1px 0 rgba(#444, .3))

@mixin button-color-basic($type: 1)
	$color: $main-color-color
	$hover-border-color-darken-amount: 22%
	@if $type == 2
		$color: #64676C
		$hover-border-color-darken-amount: 15%
	background: $color
	border-color: darken($color, 5%)
	color: white
	font-weight: 500
	&:hover
		border-color: darken($color, $hover-border-color-darken-amount)

@mixin button-small-basic
	padding:  .5rem
	font-weight: 700
	font-size: .7rem
	line-height: .7rem

button, a.button
	@include button-basic
	&.color-1
		@include button-color-basic
	&.color-2
		@include button-color-basic(2)
	&.small
		@include button-small-basic
	&.light
		background: #eee
		border-color: darken(#eee, 5%)
		color: $main-color-dark
		font-weight: 500
		&:hover
			border-color: darken(#eee, 25%)