mixin svg(symbolId)
    svg
        use('xlink:href'='#' + symbolId)


mixin icon(symbol, ...classes)
    svg(class=classes)
        use('xlink:href'='#icon-' + symbol)


mixin section(name, text)
    .section(class='section_' + name)
        a.clickable-area(href="/" + name)
            +icon(name, 'image')
            span.text= text
        if activeSection === name
            .arrow


mixin subsection(name, text, toggleSelector)
    .section.sub(class='subsection_' + name, cn=name, ts=toggleSelector)
        .clickable-area
            +icon(name, 'image')
            span.text= text
            .dot-filler
            +icon('plus', 'image', 'collapser', 'active')
            
            
mixin window(name)
    .window(id=name)
        .close-button
        block


        
mixin button(name, id, ...optionalClasses)
    .component.button(component-id=id, class=[id, optionalClasses])
        button= name
    
mixin checkbox(name, id, ...optionalClasses)
    .component.checkbox(component-id=id class=[id, optionalClasses])
        input(type='checkbox', id="comp-" + id)
        label(for="comp-" + id)= name
    
mixin textbox(name, id, ...optionalClasses)
    .component.textboxD(component-id=id class=[id, optionalClasses])
        label(for="comp-" + id)= name
        input(type='text', id="comp-" + id)