// All these mixins need to be present in the app.
@mixin border-radius($n)
  -moz-border-radius: $n
  -webkit-border-radius: $n
  border-radius: $n

@mixin box-shadow($top, $left, $blur, $color, $inset:"")
  -webkit-box-shadow: $top $left $blur $color #{$inset}
  -moz-box-shadow: $top $left $blur $color #{$inset}
  box-shadow: $top $left $blur $color #{$inset}

@mixin well
  margin: 0
  background: $gray-background
  @include border-radius(2px)
  @include box-shadow(inset 0, 0, 3px, $border-dark)
  @include animate(0.5s)

  &:hover
    background: rgba($primary-color, 0.1)

    *
      color: #333

@mixin clearfix
  overflow: auto

  &:before, &:after
    content: ""
    display: table


@mixin easeInOut
  -moz-transition: all 0.3s ease-in-out
  -o-transition: all  0.3s ease-in-out
  -webkit-transition: all 0.3s ease-in-out
  transition: all 0.3s ease-in-out

@mixin animate($n)
  transition: all $n ease-out

@mixin scale
  transform: scale(1.1)

@mixin button
  @include border-radius(3px)
  padding: 0.5em
  margin: 0.25em 0.25em 0 0
  border: 0
  cursor: pointer
  text-align: center

@mixin btn-type($type)
  background: $type
  border: 1px solid $type

  &.ae-btn-border
    color: $type !important

  &:active, &:focus
    @include box-shadow(inset, 2px, 2px, 2px, darken($type, 20%))

@mixin h1
  @include font-size(32px, 32px)

@mixin h2
  @include font-size(28px, 28px)

@mixin h3
  @include font-size(24px, 24px)

@mixin h4
  @include font-size(20px, 20px)

@mixin h5
  @include font-size(16px, 16px)

@mixin h6
  @include font-size(12px, 12px)

@mixin heading($border-color, $casing)
  text-transform: $casing
  border-bottom: 1px solid $border-color
  padding-bottom: 0.5em

  // $casing: uppercase, default


@mixin smartphone
  @media only screen and (min-width: $smartphone)
    @content

@mixin smartphone-max
  @media only screen and (max-width: $smartphone)
    @content

@mixin tablet
  @media only screen and (min-width: $tablet)
    @content

@mixin tablet-max
  @media only screen and (max-width: $tablet)
    @content

@mixin laptop
  @media only screen and (min-width: $laptop)
    @content

@mixin laptop-max
  @media only screen and (max-width: $laptop)
    @content

@mixin desktop
  @media only screen and (min-width: $desktop)
    @content

@mixin desktop-only
  display: none !important

  @include tablet
    display: inline-block !important

@mixin mobile-only
  display: block

  @include tablet
    display: none !important


@mixin body-font
  font-family: 'Lato', sans-serif

@mixin header-font
  font-family: 'Lato', sans-serif

@mixin icon-font
  font-family: FontAwesome

@function rem($size)
  $remSize: $size / 16px
  @return #{$remSize}rem

@mixin font-size($size, $large_size)
  font-size: rem($size)

  @include tablet
    font-size: rem($large_size*1.3)

  @include desktop
    font-size: rem($large_size*1.5)

@mixin p
  @include font-size(18px, 24px)
  font-weight: normal


@mixin ae-margin-left
  margin-left: 0.25em

@mixin ae-margin-right
  margin-right: 0.25em

@mixin status
  @include border-radius(2px)
  padding: 4px 10px
  font-weight: bold
  text-transform: uppercase

@mixin status-success
  background: $success
  color: #fff !important

@mixin status-error
  background: $cancelled
  color: #fff !important

@mixin status-pending
  background: $pending
  color: darken($pending, 60%)

@mixin status-deleted
  background: $deleted
  color: #999

@mixin badge
  background: $primary-color
  color: #fff
  @include border-radius(20px)
  margin-left: 10px
  padding: 4px 10px
  font-weight: bold
  text-transform: uppercase

@mixin badge-success
  background: $success
  color: #fff !important

@mixin badge-error
  background: $cancelled
  color: #fff !important

@mixin badge-pending
  background: $pending
  color: darken($pending, 60%) !important

@mixin badge-deleted
  background: $deleted
  color: #999 !important

@mixin container-table
  display: table

@mixin container-table-cell
  display: table-cell

@mixin fa-input
  position: absolute
  top: 30%
  left: 15px
  color: $body-color

  @include tablet-max
    top: 34%

  @include desktop
    top: 30%

@mixin input
  border: 1px solid $border-dark
  width: 100%
  @include border-radius(3px)
  @include box-shadow(inset, 2px, 2px, 2px, lighten($border-dark, 20%))
  outline: none
  @include easeInOut
  margin: 10px 0
  @include body-font
  vertical-align: top

  &:focus
    border: 1px solid $primary-color
    @include box-shadow(0, 0, 5px, 0, $primary-color)

@mixin sidebar($width)
  .ae-sidebar-left
    width: $width

    @include laptop
      width: 250px

@mixin sidebar-fixed($width)
  .ae-sidebar-left
    width: $width
    position: fixed

    @include laptop
      max-width: 250px

  .ae-content
    left: $width

@mixin sidebar-right($width)
  .ae-content
    right: $width

  .ae-sidebar-right
    width: $width