@import compass/css3/images

$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))

.transparent-in-linear-gradient
  +background-image(#fff linear-gradient(top left, transparent, #aaa))

.transparent-in-linear-gradient
  +background-image(radial-gradient(center center, #ddd, transparent 100px))

.bg-radial-gradient

.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)))

.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))