// sassmatic by
// # TEAM
//   Hugo Darby-Brown -- Author -- @darbybrown
// # THANKS
//   The Sass Team
//   The Compass Team
//   Jesse taylor for JS on the demo @Jesse__Taylor

=filter-setup
  content: ""
  +absolute(bottom 0, left 0, right 0, top 0, 4)
  +opacity(.4)

/* =========================================
 *Filter Washout
 *=========================================

%filter-washout
  +filter(sepia(10%) saturate(0.8) brightness(1.5) contrast(0.8))
  position: relative
  &:after
    +background-image(radial-gradient(center, ellipse cover, rgba(white, 0) 40%, rgba(white, 0.9) 100%))
    +filter-setup

/* =========================================
 *Filter Nikki
 *=========================================

%filter-nikki
  +filter(saturate(1.3) brightness(1.1) contrast(1.1))
  position: relative

/* =========================================
 *Filter Deadwood
 *=========================================

%filter-deadwood
  +filter(sepia(40%) brightness(1.4) saturate(0.8))
  position: relative
  &:after
    background: black
    +filter-setup

/* =========================================
 *Filter SanFran
 *=========================================

%filter-sanfran
  +filter(brightness(1.2) contrast(0.8) saturate(2) sepia(0.1))
  position: relative
  &:after
    +background-image(radial-gradient(center, ellipse cover, rgba(white, 0) 0%, rgba(white, 0.5) 100%))
    +filter-setup

/* =========================================
 *Filter Noire
 *=========================================

%filter-noire
  +filter(grayscale(90%) contrast(1.3))
  position: relative
  &:after
    +background-image(radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 82%, rgba(0, 0, 0, 0.69) 83%, rgba(0, 0, 0, 1) 90%))
    +filter-setup
    +opacity(.7)

/* =========================================
 *Filter Neptune
 *=========================================

%filter-neptune
  +filter(brightness(1.4) contrast(1) saturate(1))
  position: relative
  &:after
    +background-image(radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100%))
    +filter-setup

/* =========================================
 *Filter Lomo
 *=========================================

%filter-lomo
  +filter(contrast(1.3) saturate(1.2) brightness(140%))
  position: relative
  &:after
    -webkit-filter: radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 92%, rgba(0, 0, 0, 0.69) 93%, rgba(0, 0, 0, 1) 100%)
    +filter-setup
    +opacity(.9)

/* =========================================
 *Filter Warming
 *=========================================

%filter-warming
  +filter(sepia(10%) saturate(0.9) brightness(140%))
  position: relative
  &:after
    +rgba-background-inline(rgba(236, 138, 0, 0.2))
    +filter-setup
    +opacity(.6)

/* =========================================
 *Filter Cooling
 *=========================================

%filter-cooling
  +filter(sepia(10%) saturate(0.9) brightness(140%))
  position: relative
  &:after
    background-color: rgba(0, 109, 255, 0.35)
    +background-image(radial-gradient(center, ellipse cover, rgba(125, 185, 232, 0) 0%, rgba(30, 87, 153, 1) 100%))
    +filter-setup

/* =========================================
 *Filter Pro
 *=========================================

%filter-pro
  +filter(sepia(15%) contrast(1.7) saturate(0.7))
  position: relative

/* =========================================
 *Filter Casablanca
 *=========================================

%filter-casablanca
  +filter(grayscale(90%) contrast(0.8) brightness(110%))
  position: relative
  &:after
    +background-image(radial-gradient(center, ellipse cover, rgba(white, 0) 0%, rgba(white, 0.9) 100%))
    +filter-setup

/* =========================================
 *Filter Glassic
 *=========================================

%filter-glassic
  +filter(brightness(90%) contrast(1.2))
  position: relative
  &:after
    +background-image(linear-gradient(left bottom, rgba(244, 244, 244, 0.3) 0%, rgba(244, 244, 244, 0.3) 60%, rgba(244, 244, 244, 0.7) 60%, rgba(255, 255, 255, 1) 100%))
    +box-shadow( 0px 0px 10rem rgba(255, 255, 255, 1) inset)
    +filter-setup
    +opacity(.6)

/* =========================================
 *Filter Custom
 *=========================================

=filter-custom($var: none)
  +filter($var)
  position: relative
  &:after
    content: ""
    +absolute(right 0, bottom 0, top 0, left 0, 4)

/* =========================================
 *Filter Color
 *=========================================

=filter-color($color: #df8800, $opacity: 0.4)
  &:after
    +rgba-background-inline(rgba($color, $opacity))

/* =========================================
 *Filter Vignette
 *=========================================

=filter-vignette($color: black, $start: 80%, $stop: 95%, $extra: 0)
  &:after
    +background-image(radial-gradient(center, ellipse cover, rgba($color, 0) $start, rgba($color, 0.9) $stop))
    +box-shadow( 0 0 $extra rgba($color, 1) inset)