@import project-setup
@import compass/css3/images

$svg-gradient-shim-threshold: 0

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

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

.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-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(white linear-gradient(top left, transparent, #aaa))

.currentColor-in-linear-gradient
  +background-image(white linear-gradient(top left, transparent, currentColor))

.calc-in-linear-gradient
  +background-image(linear-gradient(to right, white calc(100% - 50px), transparent calc(100% - 50px)))

.rgba-in-linear-gradient
  +background-image(white linear-gradient(top left, rgba(255,255,255,0.8), rgba(0,0,0,0.1)))

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

.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-radial-gradient
  +background-image(radial-gradient(center center, #ddd, transparent 100px))

.currentColor-in-radial-gradient
  +background-image(radial-gradient(center center, currentColor, transparent 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))

$svg-gradient-shim-threshold: 10

.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"), #cc0000))

.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(white, 1), rgba(white, 0))

.linear-gradient-new
  +background(linear-gradient(to bottom, #ff0000 0%, #88aa44 100%))

.radial-gradient-old
  /* radial-gradient(yellow, green)
  +background(radial-gradient(yellow, green))
  /* radial-gradient(ellipse at center, yellow 0%, green 100%)
  +background(radial-gradient(center, ellipse, yellow 0%, green 100%))
  /* radial-gradient(farthest-corner at 50% 50%, yellow, green)
  +background(radial-gradient(50% 50%, farthest-corner, yellow, green))
  /* radial-gradient(circle, yellow, green)
  +background(radial-gradient(circle, yellow, green))
  /* radial-gradient(red, yellow, green)
  +background(radial-gradient(red, yellow, green))
  /* radial-gradient(farthest-side at left bottom, red, yellow 50px, green)
  +background(radial-gradient(left bottom, farthest-side, red, yellow 50px, green))
  /* radial-gradient(closest-side at 20px 30px, red, yellow, green)
  +background(radial-gradient(20px 30px, closest-side, red, yellow, green))
  /* radial-gradient(20px 30px at 40px 50px, red, yellow, green)
  +background(radial-gradient(40px 50px, 20px 30px, red, yellow, green))
  /* radial-gradient(closest-side circle at , red, yellow, green)
  +background(radial-gradient(20px 30px, closest-side circle, red, yellow, green))
  /* radial-gradient(20px 20px at 20px 30px, red, yellow, green)
  +background(radial-gradient(20px 30px, 20px 20px, red, yellow, green))

.radial-gradient-new
  /* radial-gradient(yellow, green)
  +background(radial-gradient(yellow, green))
  /* radial-gradient(ellipse at center, yellow 0%, green 100%)
  +background(radial-gradient(ellipse at center, yellow 0%, green 100%))
  /* radial-gradient(farthest-corner at 50% 50%, yellow, green)
  +background(radial-gradient(farthest-corner at 50% 50%, yellow, green))
  /* radial-gradient(circle, yellow, green)
  +background(radial-gradient(circle, yellow, green))
  /* radial-gradient(red, yellow, green)
  +background(radial-gradient(red, yellow, green))
  /* radial-gradient(farthest-side at left bottom, red, yellow 50px, green)
  +background(radial-gradient(farthest-side at left bottom, red, yellow 50px, green))
  /* radial-gradient(closest-side at 20px 30px, red, yellow, green)
  +background(radial-gradient(closest-side at 20px 30px, red, yellow, green))
  /* radial-gradient(20px 30px at 20px 30px, red, yellow, green)
  +background(radial-gradient(20px 30px at 40px 50px, red, yellow, green))
  /* radial-gradient(closest-side circle at 20px 30px, red, yellow, green)
  +background(radial-gradient(closest-side circle at 20px 30px, red, yellow, green))
  /* radial-gradient(20px 20px at 20px 30px, red, yellow, green)
  +background(radial-gradient(20px 20px at 30px 30px, red, yellow, green))

$use-legacy-gradient-syntax: true
 
.linear-gradient-old
  +background(linear-gradient(top, #ff0000 0%, #88aa44 100%))
 
// This setting is only important when we can't tell which syntax is being used.
// * That is only ever true when the angle is specified in deg
// * original webkit syntax does not support deg (see output)
// * if $support-for-original-webkit-gradients and type-of($angle) == "number" : @WARN
$use-legacy-gradient-syntax: false
 
.linear-gradient-unknown-new
  +background(linear-gradient(120deg, #ff0000 0%, #88aa44 100%))
 
$use-legacy-gradient-syntax: true
 
.linear-gradient-unknown-old
  +background(linear-gradient(120deg, #ff0000 0%, #88aa44 100%))

$svg-gradient-shim-threshold: 100
$browser-minimum-versions: ('ie': '9')
.issue-1676-has-svg-because-of-minimums
  +background-image(linear-gradient(#ddd, #aaa))

.issue-1766
  background: radial-gradient(white, black)
  background: linear-gradient(white, black)
