@import "variables/sizes"
@import "variables/colors"
@import "mixins/hide"

@import "compass/css3/opacity"
@import "compass/css3/transition"
@import "compass/css3/box-shadow"

=background-glassy
  background: transparentize(tint($color-one, 40), 0.70)

=border-glassy
  border: 1px solid transparentize($color-one, 0.20)

=background-main
  background: $color-one

=background-subtle
  background: tint($color-one, 50)

=background-white
  background: white

=padded_block
  padding: $tile

=background-material
  background: $color-two

=top_shadow($depth: 1)

  $z1 : 0
  $z2 : 0
  $z3 : 0
  $z4 : 0
  $z5 : 0

  @if $depth == 1 
    $z1 : 1 
  @if $depth == 2 
    $z2 : 1 
  @if $depth == 3 
    $z3 : 1 
  @if $depth == 4 
    $z4 : 1 
  @if $depth == 5 
    $z5 : 1 

  @include box-shadow( 0px 1px 1.5px rgba(#000, $z1), 0px 3px 3px rgba(#000, $z2), 0px 10px 10px rgba(#000, $z3), 0px 14px 14px rgba(#000, $z4), 0px 19px 19px rgba(#000, $z5))

=bottom_shadow($depth: 1)
  $z1 : 0
  $z2 : 0
  $z3 : 0
  $z4 : 0
  $z5 : 0
  @if $depth == 1 
    $z1 : 1 
  @if $depth == 2 
    $z2 : 1 
  @if $depth == 3 
    $z3 : 1 
  @if $depth == 4 
    $z4 : 1 
  @if $depth == 5 
    $z5 : 1 

  @include box-shadow( 0px 1px 1px rgba(#000, $z1), 0px 3px 3px rgba(#000, $z2), 0px 6px 3px rgba(#000, $z3), 0px 10px 5px rgba(#000, $z4), 0px 15px 6px rgba(#000, $z5))
  

=material($depth: 1)
  +top_shadow($depth)
  +bottom_shadow($depth)
  z-index: $depth * 2

=material_block($depth: 1)
  +padded_block
  +background-material
  +material($depth)