@import 'nib'

/* sizes */

font-size = 10px
touch-scale = 1.25

panel-width = 245px
panel-width-touch = 300px

row-height = 2.9em
row-name-width = 38%

padding = 8px

/* colors */

color-font = #ECEBE0
color-panel = rgba( 30, 30, 30, 0.95 )

color-comment = #E0CF99

color-number = #25A0D8
color-boolean = #864694
color-string = #1EBD6E

light = rgba( 255, 255, 255, 0.25 )
lighter = rgba( 255, 255, 255, 0.05 )

dark = rgba( 0, 0, 0, 0.1 )

/* other */

ease = cubic-bezier( .25, .25, 0, 1 )

/* mixins */

panel-font( color = color-font )
    font font-size 'Lucida Grande', sans-serif
    color color
    if ( color == color-font )
        -webkit-font-smoothing antialiased
    +touch()
        font-size font-size * touch-scale

touch( val = true )
    :host-context({ '.touch-' + val }) &
        { block }

hover()
    +touch( false )
        &:hover
            { block }