$bootstrap: #6f5499
$bootstrap-invert: #fff

.bd-bootstrap-table
  margin: 3rem 0

.bd-pros-heading
  padding: 0 2rem
  text-align: center

.bd-pros-icon
  margin-bottom: 3rem
  text-align: center
  svg
    height: 3rem
    width: auto

.bd-pros-list
  margin: 0 auto
  max-width: 540px

.bd-pro
  .icon
    position: relative
    top: -1px
  .title
    margin-bottom: 0.5rem

.bd-pro + .pro
  margin-top: 2rem
  padding-top: 2rem

.bd-pro-content
  p:not(:last-child)
    margin-bottom: 0.5rem

.bd-pro.bd-is-bulma
  .icon
    color: $primary

.bd-pro.bd-is-bootstrap
  .icon
    color: $bootstrap

.bd-bootstrap-comparison
  margin: 0 auto
  max-width: 42rem
  .table
    color: $red
    thead,
    tfoot
      th
        font-size: 1.5rem
        text-align: center
      svg
        height: 1.5rem
        margin-right: 1rem
        position: relative
        top: 0.25rem
        width: auto
    tbody
      th
        font-size: 1.25rem
        text-align: center
      td
        font-family: $family-monospace
        width: 50%
      a
        color: currentColor
        &:hover
          text-decoration: underline
    .bd-is-empty
      background-color: $background
      color: $text-light
    .bd-is-unique
      background-color: rgba($green, 0.25)
      color: $text-strong
      font-weight: $weight-bold

.bd-bootstrap-comparison-header
  margin-bottom: 3rem