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

$themeName: "odometer-theme-slot-machine"
$spacing: .15em
$borderRadius: .2em

+spinning-odometer($themeName)

.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
    +border-radius(.34em)
    +background-image(linear-gradient(#ff0, #ffa500))
    background-color: #fc0
    font-family: "Rye", monospace
    padding: $spacing
    color: #f80000
    line-height: 1.35em
    border: .03em solid #000
    -webkit-text-stroke: .05em #000

    .odometer-digit
        +box-shadow(inset 0 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))
        +border-radius(.2em)
        +background-image(linear-gradient(top, #ccc 0%, #fff 20%, #fff 80%, #ccc 100%))
        border: .03em solid #444
        padding: .1em $spacing 0

        &:first-child
            +box-shadow(inset .05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))

        &:last-child
            +box-shadow(inset -.05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))

        + .odometer-digit
            margin-left: $spacing

        .odometer-digit-inner
            padding-top: .08em

        .odometer-digit-inner, .odometer-value.odometer-last-value
            left: 0
            right: 0
            text-align: center