mixin ToastBasicExampleDemo
  .toast.show(role='alert' aria-live='assertive' aria-atomic='true')
    .toast-header
      = '\n'
      strong.me-auto Bootstrap
      small 11 mins ago
      = '\n'
      button.ms-2.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
    .toast-body
      | Hello, world! This is a toast message.

mixin ToastStackingDescription
  p&attributes(attributes) When you have multiple toasts, we default to vertically stacking them in a readable manner.

mixin ToastStackingDemo
  .toast.show.mb-2(role='alert' aria-live='assertive' aria-atomic='true')
    .toast-header
      = '\n'
      strong.me-auto Bootstrap
      = '\n'
      small.text-500.dark__text-500 just now
        = '\n'
      button.ms-2.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
      = '\n'
    .toast-body
      | See? Just like this.
  .toast.show(role='alert' aria-live='assertive' aria-atomic='true')
    .toast-header
      = '\n'
      strong.me-auto Bootstrap
      small.text-500.dark__text-500 2 seconds ago
      = '\n'
      button.ms-2.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
    .toast-body
      | Heads up, toasts will stack automatically

mixin ToastPlacementDescription
  p&attributes(attributes) Place toasts with the helper classes as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the 
    code .toast
    |.     
mixin RoastRightPlaceDemo
  .position-relative(aria-live='polite' aria-atomic='true' style='min-height: 90px;')
    .toast.show.position-absolute.top-0.end-0
      .toast-header
        = '\n'
        strong.me-auto Bootstrap
        small 11 mins ago
        = '\n'
        button.ms-2.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
      .toast-body
        | Hello, world! This is a toast message.

mixin ToastMiddlePlaceDescription
  p&attributes(attributes) You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

mixin RoastMiddlePlaceDemo
  .d-flex.flex-center(aria-live='polite' aria-atomic='true' style='min-height: 300px;')
    .toast.show(role='alert' data-bs-autohide='false' aria-live='assertive' aria-atomic='true')
      .toast-header
        strong.me-auto Bootstrap
        small 11 mins ago
        button.ms-2.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
      .toast-body
        | Hello, world! This is a toast message.

mixin LiveToastDemo
  button.btn.btn-primary#liveToastBtn(type='button') Show live toast
  .position-fixed.bottom-0.end-0.p-3(style='z-index: 5')
    #liveToast.toast.fade(role='alert' aria-live='assertive' aria-atomic='true')
      .toast-header.bg-primary.text-white
        strong.me-auto Bootstrap
        small 11 mins ago
        div(data-bs-theme="dark")
          button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
      .toast-body
        | Hello, world! This is a toast message.

mixin TranslucentDemo
  .toast.show(role='alert' data-bs-autohide='false' aria-live='assertive' aria-atomic='true')
    .toast-header.text-bg-light
      strong.me-auto Bootstrap
      small.text-500.dark__text-500 11 mins ago
      button.btn-close(type='button' data-bs-dismiss='toast' aria-label='Close')
    .toast-body.text-bg-light
      | Hello, world! This is a toast message.
      

mixin ToastColorSchemesDemo
  .d-flex
    .toast.show.align-items-center.text-white.bg-primary.border-0(role='alert' data-bs-autohide='false' aria-live='assertive' aria-atomic='true')
      .d-flex.flex-between-center
        .toast-body.text-bg-primary
          = '\n'  
          | Hello, world! This is a toast message.
          = '\n'
        = '\n'
        div(data-bs-theme="dark")
          button.btn-close.me-2.m-auto(type='button' data-bs-dismiss='toast' aria-label='Close')

mixin CustomContentDemo
  .toast.show.align-items-center(role='alert' data-bs-autohide='false' aria-live='assertive' aria-atomic='true')
    .d-flex
      .toast-body
        | Hello, world! This is a toast message.
      = '\n'
      button.btn-close.me-2.m-auto(type='button' data-bs-dismiss='toast' aria-label='Close')
    .mt-2.p-3.border-top
      = '\n'
      button.btn.btn-primary.btn-sm(type='button') Take action
      = '\n'
      button.btn.btn-secondary.btn-sm.ms-2(type='button' data-bs-dismiss='toast') Close