mixin button(text)
    - var elementClassName = 'Button'
    - var mods = (attributes.modes || []).map(function(el) {return elementClassName+ "--" + el; }).join(' ');
    - var states = (attributes.states || []).join(' ');
    a.Button(class=mods+' '+states)=text
    
    
mixin btn()
  +b('button').Button&attributes(attributes)
    block
        
mixin btn-spinner()
    +b('button').Button.--withSpinner&attributes(attributes)
        block
        +spinner     

    
//- for preview
+set('button')
    .Grid
        .Grid-column
            h1.subheader bem button
            hr
    
    .Grid
        .Grid-column
            p default
            +btn.--large .Button--large
            +btn .Button
            +btn.--small .Button--small
        .Grid-column
            p .is-disabled
            +btn.--large.is-disabled --large
            +btn.is-disabled .Button
            +btn.--small.is-disabled --small
    .Grid
        .Grid-column
            +btn.--large.--hollow hollow large
            +button('button simple')(modes=['hollow'])
            +button('button simple')(modes=['sm','hollow'])

        .Grid-column
            +button('button simple')(modes=['lg','hollow'],states=['is-disabled'])
            +button('button simple')(modes=['hollow'],states=['is-disabled'])
            +button('button simple')(modes=['sm','hollow'],states=['is-disabled'])
            
            
    .Grid
        .Grid-column
            +button('button simple')(modes=['full'])