@import compass/css3
@import mixins
@import url("//fonts.googleapis.com/css?family=Arimo")

$themeName: "odometer-theme-car"
$padding: .15em
$borderRadius: .2em

+spinning-odometer($themeName)

.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
    +border-radius(.34em)
    font-family: "Arimo", monospace
    padding: $padding
    background: #000
    color: #eee0d3

    .odometer-digit
        +box-shadow(inset 0 0 .3em rgba(0, 0, 0, 0.8))
        +background-image(linear-gradient(top, #333 0%, #333 40%, #101010 60%, #333 80%, #333 100%))
        padding: 0 $padding

        &:first-child
            +border-radius($borderRadius 0 0 $borderRadius)

        &:last-child
            +border-radius(0 $borderRadius $borderRadius 0)
            +background-image(linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%))
            background-color: #eee0d3
            color: #000

        .odometer-digit-inner
            left: $padding

    &.odometer-animating-up .odometer-ribbon-inner, &.odometer-animating-down.odometer-animating .odometer-ribbon-inner
        -webkit-transition-timing-function: linear
        -moz-transition-timing-function: linear
        -ms-transition-timing-function: linear
        -o-transition-timing-function: linear
        transition-timing-function: linear