mixin view-bubble
    +view('bubble', 'Bubble')
        .c-box
            +bubble('Volpeon')(compact=true)
                +slot('body')= loremIpsum
                +slot('time')
                    = '12:34'
                    +icon('lock')(class='u-ml-100')

        .c-box
            +bubble('Volpeon')(compact=true, highlight=true)
                +slot('body')= loremIpsum

        .c-box.u-themed.t-hi
            +bubble()(compact=true theme='t-def')
                +slot('body')= loremIpsum

        .c-box.l-overflow(style='resize: vertical')
            +bubble('Volpeon')(avatar=true)
                +slot('header')
                    .l-media.l-media--flush
                        .l-media__block.l-media__block--main
                            strong= 'Volpeon'
                            small.u-ml-100= '@volpeon@mk.vulpes.one'
                        small.l-media__block
                            = '5 minutes ago'
                            +icon('lock')(class='u-ml-100')
                +slot('body')
                    = loremIpsum
                    = loremIpsum
                    = loremIpsum