mixin PhoenixButtonsDemo
  button.btn.btn-phoenix-primary.me-1.mb-1(type='button') Primary
  = '\n'
  button.btn.btn-phoenix-secondary.me-1.mb-1(type='button') Secondary
  = '\n'
  button.btn.btn-phoenix-success.me-1.mb-1(type='button') Success
  = '\n'
  button.btn.btn-phoenix-danger.me-1.mb-1(type='button') Danger
  = '\n'
  button.btn.btn-phoenix-warning.me-1.mb-1(type='button') Warning
  = '\n'
  button.btn.btn-phoenix-info.me-1.mb-1(type='button') Info

mixin SolidButtonsDemo
  button.btn.btn-primary.me-1.mb-1(type='button') Primary
  = '\n'
  button.btn.btn-secondary.me-1.mb-1(type='button') Secondary
  = '\n'
  button.btn.btn-success.me-1.mb-1(type='button') Success
  = '\n'
  button.btn.btn-danger.me-1.mb-1(type='button') Danger
  = '\n'
  button.btn.btn-warning.me-1.mb-1(type='button') Warning
  = '\n'
  button.btn.btn-info.me-1.mb-1(type='button') Info
  = '\n'
  button.btn.btn-link.me-1.mb-1(type='button') Link

mixin SubtleButtonsDemo
  button.btn.btn-subtle-primary.me-1.mb-1(type='button') Primary
  = '\n'
  button.btn.btn-subtle-secondary.me-1.mb-1(type='button') Secondary
  = '\n'
  button.btn.btn-subtle-success.me-1.mb-1(type='button') Success
  = '\n'
  button.btn.btn-subtle-danger.me-1.mb-1(type='button') Danger
  = '\n'
  button.btn.btn-subtle-warning.me-1.mb-1(type='button') Warning
  = '\n'
  button.btn.btn-subtle-info.me-1.mb-1(type='button') Info


mixin ButtonOutlineDemo
  button.btn.btn-outline-primary.me-1.mb-1(type='button') Primary
  = '\n'
  button.btn.btn-outline-secondary.me-1.mb-1(type='button') Secondary
  = '\n'
  button.btn.btn-outline-success.me-1.mb-1(type='button') Success
  = '\n'
  button.btn.btn-outline-danger.me-1.mb-1(type='button') Danger
  = '\n'
  button.btn.btn-outline-warning.me-1.mb-1(type='button') Warning
  = '\n'
  button.btn.btn-outline-info.me-1.mb-1(type='button') Info

mixin ButtonSizesDemo
  button.btn.btn-primary.btn-sm.me-1.mb-1(type='button') Request Payout
  = '\n'
  button.btn.btn-primary.me-1.mb-1(type='button') Request Payout
  = '\n'
  button.btn.btn-primary.btn-lg.me-1.mb-1(type='button') Request Payout

mixin ButtonIconDemo
  button(type='button').btn.btn-phoenix-secondary.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-phoenix-secondary.me-1.mb-1
    = '\n'
    span.fas.fa-plus.me-1(data-fa-transform="shrink-3")
    | Regular
    = '\n'
  = '\n'
  button(type='button').btn.btn-phoenix-secondary.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-phoenix-secondary.rounded-pill.me-1.mb-1 Example
    = '\n'
  button(type='button').btn.btn-phoenix-secondary.rounded-pill.me-1.mb-1
    = '\n'
    span.fas.fa-align-left.me-2(data-fa-transform="shrink-3")
    | Icon Left
  = '\n'
  button(type='button').btn.btn-phoenix-secondary.rounded-pill.me-1.mb-1 
    = '\n'
    | Icon Right 
    span.fas.fa-align-right.ms-2(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-phoenix-secondary.rounded-pill.me-1.mb-1 Capsule Small
  = '\n'
  button(type='button').btn.btn-phoenix-secondary.rounded-pill.me-1.mb-1 Capsule Regular
  = '\n'
  button(type='button').btn.btn-lg.btn-phoenix-secondary.rounded-pill.me-1.mb-1 Capsule Large


mixin ButtonGroupDemo
  .btn-group(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


mixin ButtonToolbarDemo
  .btn-toolbar(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
    .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


mixin ButtonToolbarWithInputGroupDemo
  .btn-toolbar.mb-3(role='toolbar' aria-label='Toolbar with button groups')
    = '\n'
    .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
      = '\n'
      #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
      = '\n'
      #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
  = '\n'
  .btn-group.btn-group-lg.me-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.mt-2.me-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(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


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='disabled') Primary button
  = '\n'
  button.btn.btn-secondary.btn-lg.ms-2(type='button' disabled='disabled') Button

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

mixin CloseButtonWhiteVariant
  = '\n'
  button.btn-close(type='button' aria-label='Close')
  = '\n'
  button.btn-close(type='button' disabled='' aria-label='Close')

mixin CloseButtonExample
  button.btn-close(type='button' aria-label='Close')
  = '\n'
  button.btn-close(type='button' disabled='' aria-label='Close')