mixin view-button 
    +view('button', 'Button')
        .c-box
            +a-button(size='sm')= 'Button'
            = ' '
            +a-button= 'Button'
            = ' '
            +a-button(size='lg')= 'Button'
            = ' '
            +a-button(size='xl')= 'Button'

        .c-box
            +a-button(size='sm' outline=true)= 'Button'
            = ' '
            +a-button(outline=true)= 'Button'
            = ' '
            +a-button(size='lg' outline=true)= 'Button'
            = ' '
            +a-button(size='xl' outline=true)= 'Button'

        .c-box
            +a-button(postIcon='arrow-right' size='sm')= 'Button'
            = ' '
            +a-button(postIcon='arrow-right')= 'Button'
            = ' '
            +a-button(postIcon='arrow-right' size='lg')= 'Button'
            = ' '
            +a-button(postIcon='arrow-right' size='xl')= 'Button'

        .c-box
            .l-button-group
                +a-button= 'Button'
                +a-button(disabled=true)= 'Button'
                +a-button(outline=true)= 'Button'
                +a-button(outline=true disabled=true)= 'Button'
            br
            .l-button-group
                +a-button(icon='trash')
                +a-button(disabled=true icon='trash')
                +a-button(outline=true icon='trash')
                +a-button(outline=true disabled=true icon='trash')

        each theme in ['primary', 'accent', 'negative']
            .c-box
                .l-button-group
                    +a-button(variant=theme)= 'Button'
                    +a-button(variant=theme disabled=true)= 'Button'
                    +a-button(variant=theme outline=true)= 'Button'
                    +a-button(variant=theme outline=true disabled=true)= 'Button'
                br
                .l-button-group
                    +a-button(variant=theme icon='trash')
                    +a-button(variant=theme disabled=true icon='trash')
                    +a-button(variant=theme outline=true icon='trash')
                    +a-button(variant=theme outline=true disabled=true icon='trash')

        each theme in ['static-black', 'static-white']
            -
                const bg = theme.startsWith('static-black') ? 500 : 1000;

            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                .l-button-group
                    +a-button(variant=theme)= 'Button'
                    +a-button(variant=theme disabled=true)= 'Button'
                    +a-button(variant=theme outline=true)= 'Button'
                    +a-button(variant=theme outline=true disabled=true)= 'Button'
                br
                .l-button-group
                    +a-button(variant=theme icon='trash')
                    +a-button(variant=theme disabled=true icon='trash')
                    +a-button(variant=theme outline=true icon='trash')
                    +a-button(variant=theme outline=true disabled=true icon='trash')

            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                .l-button-group
                    +a-button(variant=theme primary=true)= 'Button'
                    +a-button(variant=theme primary=true disabled=true)= 'Button'
                    +a-button(variant=theme primary=true outline=true)= 'Button'
                    +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
                br
                .l-button-group
                    +a-button(variant=theme primary=true icon='trash')
                    +a-button(variant=theme primary=true disabled=true icon='trash')
                    +a-button(variant=theme primary=true outline=true icon='trash')
                    +a-button(variant=theme primary=true outline=true disabled=true icon='trash')