@import compass/css3/images, compass/css3/gradient

$experimental-support-for-svg: true
.bg-shortcut-simple-image
  +background(#fff url('foo.png'))

.bg-shortcut-linear-gradient
  +background(#fff linear-gradient(top left, #ddd, #aaa))

.bg-shortcut-radial-gradient
  +background(#fff radial-gradient(center center, #ddd, #aaa 100px))

.bg-linear-gradient-angle-svg
  +background-image(linear-gradient(-45deg, blue, black))

.bg-linear-gradient-angle2-svg
  +background-image(linear-gradient(top left, blue, black))
  
.bg-all-gradient-types-with-simplification
  +background-with-css2-fallback(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px), #ffcc00)

.bg-simple-image
  +background-image(url('foo.png'))

.bg-linear-gradient
  +background-image(linear-gradient(top left, #ddd, #aaa))

.bg-linear-gradient-pixel-stop-from-top
  +background-image(linear-gradient(top, #ddd 10px, #aaa 40px))

.bg-linear-gradient-pixel-stop-from-left
  +background-image(linear-gradient(left, #ddd 10px, #aaa 40px))

.bg-radial-gradient
  +background-image(radial-gradient(center center, #ddd, #aaa 100px))

.bg-linear-gradient-with-angle
  +background-image(linear-gradient(-45deg, #ddd, #aaa))

.bg-radial-gradient-with-angle-and-shape
  +background-image(radial-gradient(ellipse cover, #ddd, #aaa 100px))

.bg-all-gradient-types
  +background-image(image-url("4x6.png"), linear-gradient(top left, #ddd, #aaa), radial-gradient(center center, #ddd, #aaa 100px))

.border-image-gradient
  +border-image(radial-gradient(#0f0,#f00 100px) 100 stretch)

.direct-list-image-plain
  +list-style-image(image-url("4x6.png"))

.shorthand-list-image-plain
  +list-style(outside image-url("4x6.png"))

.direct-list-image-with-gradient
  +list-style-image(radial-gradient(lime, red 10px))

.shorthand-list-image-with-gradient
  // Note: I haven't seen a browser render this correctly, but they should eventually.
  +list-style(outside radial-gradient(lime, red 10px))

.content-plain
  +content("asdf")

.content-with-gradient
  +content(radial-gradient(lime, red 10px))

$experimental-support-for-svg: false

.bg-linear-gradient-no-position
  +background-image(linear-gradient(#ddd, #aaa))

.bg-radial-gradient-no-position
  +background-image(radial-gradient(#ddd, #aaa 100px))

.image-fallback
  +background-image(image(radial-gradient(#ddd, #aaa 100px), image-url("4x6.png"), #c00))

.cross-fade
  +background-image(cross-fade(radial-gradient(#ddd, #aaa 100px), image-url("4x6.png")))

.unknown-function-wrapper
  +background(foo(radial-gradient(#ddd, #aaa 100px)))

.linear-1
  +linear-gradient(color-stops(#dddddd, #aaaaaa))

.linear-2
  +linear-gradient(color-stops(#dddddd, #aaaaaa), left)

.linear-3
  +linear-gradient(color-stops(#dddddd, #aaaaaa), top left)

.linear-4
  +linear-gradient(color-stops(#dddddd, #aaaaaa), top right)

.linear-5
  +linear-gradient(color-stops(#dddddd, #cccccc, #aaaaaa))

.linear-6
  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #aaaaaa))

.linear-7
  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))

.linear-8
  +linear-gradient(color-stops(#dddddd 80%, #aaaaaa))

.linear-9
  +linear-gradient(color-stops(#dddddd, #aaaaaa 20%))

.linear-10
  +linear-gradient(color-stops(#dddddd 40%, #aaaaaa 50%))

.linear-11
  +linear-gradient(color-stops(#dddddd 40%, black, #aaaaaa 50%))

.linear-12
  +linear-gradient(color-stops(white, blue 33%, black 67%))
  
.radial-1
  // A default radial gradient:
     A centered gradient having the shape of the container (aka ellipse)
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

.radial-2
  // A centered gradient having the shape of the container (aka ellipse)
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

.radial-3
  // A centered gradient at the top having the shape of the container (aka ellipse)
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)

.radial-4
  // A centered gradient having a circular shape
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

.radial-5
  // A centered gradient at the top having a circular shape
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)

.radial-6
  // A centered circular gradient with color stops
     The color stops must be absolute units
  +radial-gradient(color-stops(#dddddd 20px, #aaaaaa 50px))

.radial-7
  // A centered elliptical gradient with color stops
     The color stops must be relative units
  +radial-gradient(color-stops(#dddddd 20%, #aaaaaa 50px))

.alpha-linear
  +linear-gradient(color-stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))

$experimental-support-for-svg: true
.linear-svg-1
  +linear-gradient(color-stops(#dddddd, #aaaaaa))

.linear-svg-2
  +linear-gradient(color-stops(#dddddd, #aaaaaa), left)

.linear-svg-3
  +linear-gradient(color-stops(#dddddd, #aaaaaa), top left)

.linear-svg-4
  +linear-gradient(color-stops(#dddddd, #aaaaaa), top right)

.linear-svg-5
  +linear-gradient(color-stops(#dddddd, #cccccc, #aaaaaa))

.linear-svg-6
  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #aaaaaa))

.linear-svg-7
  +linear-gradient(color-stops(#dddddd, #cccccc 20%, #eeeeee, #aaaaaa))

.linear-svg-8
  +linear-gradient(color-stops(#dddddd 80%, #aaaaaa))

.linear-svg-9
  +linear-gradient(color-stops(#dddddd, #aaaaaa 20%))

.linear-svg-10
  +linear-gradient(color-stops(#dddddd 40%, #aaaaaa 50%))

.linear-svg-11
  +linear-gradient(color-stops(#dddddd 40%, black, #aaaaaa 50%))

.linear-svg-12
  +linear-gradient(color-stops(white, blue 33%, black 67%))

.radial-svg-1
  // A default radial gradient:
     A centered gradient having the shape of the container (aka ellipse)
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

.radial-svg-2
  // A centered gradient having the shape of the container (aka ellipse)
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

.radial-svg-3
  // A centered gradient at the top having the shape of the container (aka ellipse)
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)

.radial-svg-4
  // A centered gradient having a circular shape
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px))

.radial-svg-5
  // A centered gradient at the top having a circular shape
  +radial-gradient(color-stops(#dddddd, #aaaaaa 100px), top center)

.radial-svg-6
  // A centered circular gradient with color stops
     The color stops must be absolute units
  +radial-gradient(color-stops(#dddddd 20px, #aaaaaa 50px))

.radial-svg-7
  // A centered elliptical gradient with color stops
     The color stops must be relative units
  +radial-gradient(color-stops(#dddddd 20%, #aaaaaa 50px))

.alpha-linear-svg
  +linear-gradient(color-stops(rgba(255, 255, 255, 0) 40%, rgba(255, 127, 127, 0.5), rgba(255, 255, 255, 1) 50%))

.ie-horizontal-filter
  +filter-gradient(white, black, horizontal)

.ie-vertical-filter
  +filter-gradient(white, black, vertical)

.ie-alpha-filter
  +filter-gradient(rgba(#fff, 1), rgba(#fff, 0))
