// base .cmi-flex-list-table, .cmi-flex-list-table ul.cmi-ul, .cmi-flex-list-table li.cmi-li

+box-sizing(border-box)

.cmi-flex-list-table

position: relative
display: block
width: auto
ul.cmi-ul,
li.cmi-li
  position: relative
ul.cmi-ul
  +clearfix
  +display(flex)
  +flex-direction(row)
  +justify-content(space-between)
  +align-items(center)
  +align-content(stretch)
  +flex-wrap(nowrap)
  width: auto
  margin: 0
  padding: 0
  list-style: none
  background-color: transparent
li.cmi-li
  +flex(1)
  +flex-grow(1)
  width: auto
  float: left
  padding: 5px 15px
  text-align: left
ul.cmi-flex-list-table-headline
  border-bottom: 1px solid rgb(245, 245, 245)
  li.cmi-li
    font-weight: bold

// striped .cmi-flex-list-table-striped

ul.cmi-ul:nth-child(odd):not(.cmi-flex-list-table-headline)
  background-color: rgba(#000, 0.03)

// hoverable .cmi-flex-list-table-hoverable

ul.cmi-ul:not(.cmi-flex-list-table-headline):hover
  background-color: rgba(#000, 0.02)

// active rows .cmi-flex-list-table

ul.cmi-flex-list-table-active
  background-color: $color-table-row-active
&.cmi-flex-list-table-striped
  ul.cmi-flex-list-table-active:nth-child(odd)
    background-color: darken($color-table-row-active, 5%)
&.cmi-flex-list-table-hoverable
  ul.cmi-flex-list-table-active,
  ul.cmi-flex-list-table-active:nth-child(odd)
    &:hover
      background-color: lighten($color-table-row-active, 5%)