mixin BorderWidth
  = '\n'
  span.border.border-1
  = '\n'
  span.border.border-2
  = '\n'
  span.border.border-3
  = '\n'
  span.border.border-4
  = '\n'
  span.border.border-5
  = '\n'
  hr
  = '\n'
  span.border.border-top-2
  = '\n'
  span.border.border-end-2
  = '\n'
  span.border.border-bottom-2
  = '\n'
  span.border.border-start-2


mixin BorderDoc
  p The classes are named using the format 
    code border-{side}
    |  for 
    code xs
    |  and 
    code border-{breakpoint}-{side}
    |  for 
    code sm
    | , 
    code md
    | , 
    code lg
    | ,  
    code xl
    | , and 
    code xxl
    | .
  p
    | Where
    em  side
    |  is one of:
  ul
    li
      code top
      |  - for classes that set style for 
      code border-top
    li
      code bottom
      |  - for  classes that set style for 
      code border-bottom
    li
      code start
      |  - for  classes that set style for 
      code border-left
    li
      code end
      |  - for  classes that set style for 
      code border-right
    li
      code x
      |  - for classes that set both 
      code *-left
      |  and 
      code *-right
    li
      code y
      |  - for classes that set both 
      code *-top
      |  and 
      code *-bottom
    li
      | blank - for classes that set the 
      code border
      |  style on all 4 side of the element.

  p.mb-0 Use border utilities to quickly style the 
    code border 
    |  of an element. Great for images, buttons, or any other element.

mixin BorderAdditive
  span.border
  = '\n'
  span.border-top
  = '\n'
  span.border-end
  = '\n'
  span.border-bottom
  = '\n'
  span.border-start

mixin BorderSubtractive
  span.border.border-0
  = '\n'
  span.border.border-top-0
  = '\n'
  span.border.border-end-0
  = '\n'
  span.border.border-bottom-0
  = '\n'
  span.border.border-start-0
  = '\n'


mixin BorderRadius
  span.rounded-0
  = '\n'
  span.rounded-1
  = '\n'
  span.rounded-2
  = '\n'
  span.rounded-3
  = '\n'
  span.rounded-circle
  = '\n'
  span.rounded-pill(style="width:150px; height:75px;")
  = '\n'

mixin BorderRadiusSizeDemo

  span.rounded-top
  = '\n'
  span.rounded-top-3
  = '\n'
  span.rounded-top-4
  = '\n'
  span.rounded-end
  = '\n'
  span.rounded-end-3
  = '\n'
  span.rounded-end-4
  = '\n'
  span.rounded-bottom
  = '\n'
  span.rounded-bottom-3
  = '\n'
  span.rounded-bottom-4
  = '\n'
  span.rounded-start
  = '\n'
  span.rounded-start-3
  = '\n'
  span.rounded-start-4


mixin BorderStyle
  span.border.border-dashed
  = '\n'
  span.border-top.border-dashed
  = '\n'
  span.border-right.border-dashed
  = '\n'
  span.border-bottom.border-dashed
  = '\n'
  span.border-dashed.border-left
  = '\n'


mixin BorderColorWidth
  h5 Border Colors
  span.border.border-primary
  = '\n'
  span.border.border-secondary
  = '\n'
  span.border.border-info
  = '\n'
  span.border.border-success
  = '\n'
  span.border.border-warning
  = '\n'
  span.border.border-danger
  = '\n'
  span.border.border-light
  = '\n'
  span.border.border-dark
  = '\n'
  .w-100
  = '\n'
  span.border.border-black
  = '\n'
  span.border.border-dark
  = '\n'
  span.border.border-1100
  = '\n'
  span.border.border-1000
  = '\n'
  span.border.border-900
  = '\n'
  span.border.border-800
  = '\n'
  span.border.border-700
  = '\n'
  span.border.border-600
  = '\n'
  span.border.border-500
  = '\n'
  span.border.border-400
  = '\n'
  span.border.border-300
  = '\n'
  span.border.border-200
  = '\n'
  span.border.border-100
  = '\n'
  span.border.border-white
  h5.mt-3 Border Subtle Colors
  span.border.border-primary-subtle
  = '\n'
  span.border.border-secondary-subtle
  = '\n'
  span.border.border-info-subtle
  = '\n'
  span.border.border-success-subtle
  = '\n'
  span.border.border-warning-subtle
  = '\n'
  span.border.border-danger-subtle
  = '\n'
  span.border.border-light-subtle
  = '\n'
  span.border.border-dark-subtle
  = '\n'