@import compass/css3
$supported-browsers: reject(browsers(), "android", "android-chrome", "android-firefox", "blackberry", "chrome", "firefox", "ie", "ie-mobile", "ios-safari", "opera", "opera-mini", "opera-mobile", "safari")

@import colors

=rainbow($rainbowSize, $bandWidth, $reverse: false)
    transform: rotateZ(90deg)
    transform-origin: 50% 100%
    height: $rainbowSize / 2
    width: $rainbowSize
    overflow: hidden
    position: relative

    .bands
        position: absolute
        top: 0
        left: 0
        height: $rainbowSize / 2
        width: $rainbowSize
        overflow: hidden

        &::before
            box-shadow: inset 0 0 0 ($bandWidth * 6) $purple, inset 0 0 0 ($bandWidth * 5) $blue, inset 0 0 0 ($bandWidth * 4) $green, inset 0 0 0 ($bandWidth * 3) $yellow, inset 0 0 0 ($bandWidth * 2) $orange, inset 0 0 0 ($bandWidth * 1) $red
            @if $reverse
                box-shadow: inset 0 0 0 ($bandWidth * 6) $red, inset 0 0 0 ($bandWidth * 5) $orange, inset 0 0 0 ($bandWidth * 4) $yellow, inset 0 0 0 ($bandWidth * 3) $green, inset 0 0 0 ($bandWidth * 2) $blue, inset 0 0 0 ($bandWidth * 1) $purple

            box-shadow: inset 0 0 0 ($bandWidth * 1) $red, inset 0 0 0 ($bandWidth * 2) $orange, inset 0 0 0 ($bandWidth * 3) $yellow, inset 0 0 0 ($bandWidth * 4) $green, inset 0 0 0 ($bandWidth * 5) $blue, inset 0 0 0 ($bandWidth * 6) $purple
            @if $reverse
                box-shadow: inset 0 0 0 ($bandWidth * 1) $purple, inset 0 0 0 ($bandWidth * 2) $blue, inset 0 0 0 ($bandWidth * 3) $green, inset 0 0 0 ($bandWidth * 4) $yellow, inset 0 0 0 ($bandWidth * 5) $orange, inset 0 0 0 ($bandWidth * 6) $red

            +border-radius(50%)
            content: ""
            display: block
            position: absolute
            margin: auto
            left: 0
            right: 0
            bottom: - ($rainbowSize / 2)
            height: $rainbowSize
            width: $rainbowSize
