mixin FalconButtonsDemo
  each color in colors
    if color !== 'secondary' && color !== 'light' && color !== 'dark'
      button.btn(type = 'button' class=`btn-falcon-${color}`).me-1.mb-1
        +cleanText(color)
      = '\n'
  button.btn.btn-falcon-default.me-1.mb-1(type = 'button')
    +cleanText('default')
  
mixin SolidButtonsDemo
  each color,index in colors
    button.btn(type='button' class=`btn-${color}`).me-1.mb-1
      +cleanText(color)
    if index === 5
      <br class='d-none d-xl-block d-xxl-none'/>
    = '\n'
  button.btn.btn-link.me-1.mb-2(type = 'button')
    +cleanText('link')  
  = '\n'


mixin ButtonOutlineDemo
  each color in colors
    if color === 'light'
      .bg-dark.d-inline-flex.px-2.pt-1 
        button.btn(type='button' class=`btn-outline-${color}`).me-1.mb-1
          +cleanText(color)
    else
      button.btn(type='button' class=`btn-outline-${color}`).me-1.mb-1
        +cleanText(color)
    = '\n'

mixin ButtonSizesDemo
  .btn.btn-secondary.btn-sm Small
  .btn.btn-secondary Regular
  .btn.btn-secondary.btn-lg Large

mixin ButtonIconDemo
  button(type='button').btn.btn-falcon-default.btn-sm.me-1.mb-1
    = '\n'
    span.fas.fa-plus.me-1(data-fa-transform="shrink-3")
    | Small
    = '\n'
  = '\n'
  button(type='button').btn.btn-falcon-default.me-1.mb-1
    = '\n'
    span.fas.fa-plus.me-1(data-fa-transform="shrink-3")
    | Regular
    = '\n'
  = '\n'
  button(type='button').btn.btn-falcon-default.btn-lg.me-1.mb-1
    = '\n'
    span.fas.fa-plus.me-1(data-fa-transform="shrink-3")
    | Large
    = '\n'
  = '\n'
  hr
  = '\n'

  button(type='button').btn.btn-primary.me-1.mb-1
    = '\n'
    span.fas.fa-plus.me-1(data-fa-transform="shrink-3")
    | Regular
    = '\n'
  = '\n'
  button(type='button').btn.btn-outline-primary.me-1.mb-1
    = '\n'
    span.fas.fa-plus.me-1(data-fa-transform="shrink-3")
    | Outline
    = '\n'
  hr
  = '\n'
  button(type='button').btn.btn-primary.me-1.mb-1
    = '\n'
    | Delete
    span.fas.fa-trash.ms-1(data-fa-transform="shrink-3")
    = '\n'


mixin ButtonCapsuleDemo
  button(type='button').btn.btn-falcon-default.rounded-pill.me-1.mb-1 Example
    = '\n'
  button(type='button').btn.btn-falcon-default.rounded-pill.me-1.mb-1
    = '\n'
    span.fas.fa-align-left.me-1(data-fa-transform="shrink-3")
    | Icon Left
  = '\n'
  button(type='button').btn.btn-falcon-default.rounded-pill.me-1.mb-1 
    = '\n'
    | Icon Right 
    span.fas.fa-align-right(data-fa-transform="shrink-3")
    = '\n'
  button(type='button').btn.btn-outline-primary.rounded-pill.me-1.mb-1 Outline
  = '\n'
  hr
  = '\n'
  button(type='button').btn.btn-sm.btn-falcon-default.rounded-pill.me-1.mb-1 Capsule Small
  = '\n'
  button(type='button').btn.btn-falcon-default.rounded-pill.me-1.mb-1 Capsule Regular
  = '\n'
  button(type='button').btn.btn-lg.btn-falcon-default.rounded-pill.me-1.mb-1 Capsule Large


mixin ButtonGroupDemo
  .d-flex.flex-wrap.gap-3
    .btn-group&attributes(attributes)(role='group' aria-label='Basic example')
      = '\n'
      button.btn.btn-secondary(type='button') Left
      = '\n'
      button.btn.btn-secondary(type='button') Middle
      = '\n'
      button.btn.btn-secondary(type='button') Right
      = '\n'
    .btn-group&attributes(attributes)(role='group' aria-label='Basic example')
      = '\n'
      button.btn.btn-falcon-default(type='button') Left
      = '\n'
      button.btn.btn-falcon-default(type='button') Middle
      = '\n'
      button.btn.btn-falcon-default(type='button') Right
      = '\n'


mixin ButtonToolbarDemo
  .btn-toolbar&attributes(attributes)(role='toolbar' aria-label='Toolbar with button groups')
    .btn-group.me-2.mb-2(role='group' aria-label='First group')
      = '\n'
      button.btn.btn-secondary(type='button') 1
      = '\n'
      button.btn.btn-secondary(type='button') 2
      = '\n'
      button.btn.btn-secondary(type='button') 3
      = '\n'
      button.btn.btn-secondary(type='button') 4
      = '\n'
    .btn-group.mb-2.me-2(role='group' aria-label='Second group')
      = '\n'
      button.btn.btn-secondary(type='button') 5
      = '\n'
      button.btn.btn-secondary(type='button') 6
      = '\n'
      button.btn.btn-secondary(type='button') 7
      = '\n'
    .btn-group.mb-2(role='group' aria-label='Third group')
      = '\n'
      button.btn.btn-secondary(type='button') 8
      = '\n'


mixin ButtonToolbarWithInputGroupDemo
  .btn-toolbar.mb-3(role='toolbar' aria-label='Toolbar with button groups')
    .btn-group.mb-2.me-2(role='group' aria-label='First group')
      = '\n'
      button.btn.btn-secondary(type='button') 1
      = '\n'
      button.btn.btn-secondary(type='button') 2
      = '\n'
      button.btn.btn-secondary(type='button') 3
      = '\n'
      button.btn.btn-secondary(type='button') 4
      = '\n'
    .input-group.mb-2
      #btnGroupAddon.input-group-text @
      = '\n'
      input.form-control(type='text' placeholder='Input group example' aria-label='Input group example' aria-describedby='btnGroupAddon')
  .btn-toolbar.justify-content-between(role='toolbar' aria-label='Toolbar with button groups')
    .btn-group.mb-2(role='group' aria-label='First group')
      = '\n'
      button.btn.btn-secondary(type='button') 1
      = '\n'
      button.btn.btn-secondary(type='button') 2
      = '\n'
      button.btn.btn-secondary(type='button') 3
      = '\n'
      button.btn.btn-secondary(type='button') 4
    .input-group.mb-2
      #btnGroupAddon2.input-group-text @
      = '\n'
      input.form-control(type='text' placeholder='Input group example' aria-label='Input group example' aria-describedby='btnGroupAddon2')


mixin ButtonGroupVerticalDemo
  .btn-group-vertical&attributes(attributes)(role='group' aria-label='Vertical button group')
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'

mixin ButtonGroupSizeDemo
  .btn-group.btn-group-lg(role='group' aria-label='...')
    = '\n'
    button.btn.btn-secondary(type='button') Left
    = '\n'
    button.btn.btn-secondary(type='button') Middle
    = '\n'
    button.btn.btn-secondary(type='button') Right
    = '\n'
  .btn-group.mt-2(role='group' aria-label='...')
    = '\n'
    button.btn.btn-secondary(type='button') Left
    = '\n'
    button.btn.btn-secondary(type='button') Middle
    = '\n'
    button.btn.btn-secondary(type='button') Right
    = '\n'
  .btn-group.btn-group-sm.mt-2(role='group' aria-label='...')
    = '\n'
    button.btn.btn-secondary(type='button') Left
    = '\n'
    button.btn.btn-secondary(type='button') Middle
    = '\n'
    button.btn.btn-secondary(type='button') Right
    = '\n'

mixin ButtonGroupVerticalDemo
  .btn-group-vertical&attributes(attributes)(role='group' aria-label='Vertical button group')
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'


mixin ButtonGroupVerticalWithDropdownDemo
  .btn-group-vertical&attributes(attributes)(role='group' aria-label='Vertical button group')
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    .btn-group(role='group')
      = '\n'
      button#btnGroupVerticalDrop1.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown
      .dropdown-menu(aria-labelledby='btnGroupVerticalDrop1')
        = '\n'
        a.dropdown-item(href='#') Dropdown link
        = '\n'
        a.dropdown-item(href='#') Dropdown
        = '\n'
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    button.btn.btn-secondary(type='button') Button
    = '\n'
    .btn-group(role='group')
      = '\n'
      button#btnGroupVerticalDrop2.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown

      .dropdown-menu(aria-labelledby='btnGroupVerticalDrop2')
        a.dropdown-item(href='#') Dropdown link
        = '\n'
        a.dropdown-item(href='#') Dropdown link
        = '\n'
    .btn-group(role='group')
      = '\n'
      button#btnGroupVerticalDrop3.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown
      = '\n'
      .dropdown-menu(aria-labelledby='btnGroupVerticalDrop3')
        a.dropdown-item(href='#') Dropdown link
        = '\n'
        a.dropdown-item(href='#') Dropdown link
        = '\n'
    .btn-group(role='group')
      = '\n'
      button#btnGroupVerticalDrop4.btn.btn-secondary.dropdown-toggle(type='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
        | Dropdown
      .dropdown-menu(aria-labelledby='btnGroupVerticalDrop4')
        = '\n'
        a.dropdown-item(href='#') Dropdown link
        = '\n'
        a.dropdown-item(href='#') Dropdown link
        = '\n'  


mixin ButtonDisableStateDemo
  button.btn.btn-lg.btn-primary(type='button' disabled) Primary button
  = '\n'
  button.btn.btn-secondary.btn-lg.ms-2(type='button' disabled) Button

mixin BlockButtonsDemo
  .d-grid.gap-2
    button.btn.btn-primary(type='button') Button
    button.btn.btn-primary(type='button') Button