.cmi-card, .cmi-card-header, .cmi-card-image, .cmi-card-content, .cmi-card-actions

+box-sizing(border-box)
position: relative
display: block

.cmi-card

+cmi-border-radius(2px)
+cmi-box-shadow(0 2px 5px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12))
overflow: hidden
margin: 0.5rem 0 1rem 0
background-color: #fff

.cmi-card-header, .cmi-card-content

padding: 16px

.cmi-card-header

+clearfix
.cmi-card-header-image
  +cmi-border-radius(20px)
  position: relative
  overflow: hidden
  float: left
  width: 40px
  height: 40px
  margin-right: 16px
  img
    width: 40px
    height: auto
.cmi-card-header-headline
  margin: 0 0 3px 0
  font-size: 18px
  line-height: 1.2
.cmi-card-header-sub-headline
  margin: 0
  font-size: 14px
  line-height: 1.2
  color: color('grey', 'base')

.cmi-card-image

img.cmi-img
  width: 100%
  height: auto
span.cmi-span
  +position(absolute, auto auto 0 0)
  padding: 20px
  font-size: 24px
  font-weight: 300
  text-shadow: 0 0 4px rgba(#000, 0.4)
  color: #fff

.cmi-card-content

*:first-child
  margin-top: 0px
  &.cmi-h1,
  &.cmi-h2,
  &.cmi-h3,
  &.cmi-h4,
  &.cmi-h5,
  &.cmi-h6
    margin-top: 8px
*:last-child
  margin-bottom: 0px

.cmi-card-actions

padding: 8px
a, .cmi-btn
  min-width: 0
  margin-top: 0
  margin-bottom: 0
  padding: $button-padding-vertical 8px
  color: $color-primary
  &:hover
    color: lighten($color-primary, 15%)
    background-color: transparent
*:first-child
  margin-left: 0px
*:last-child
  margin-right: 0px

.cmi-card-separator

height: 0px
margin: 0
padding: 0
border-top: 1px solid rgba(#000, 0.05)
border-bottom: 1px solid rgba(#fff, 0.15)

.cmi-card-primary

color: #fff
background-color: $color-primary
a, .cmi-btn
  color: color('grey', 'darken-3')
  &:hover
    color: color('grey', 'darken-1')
.cmi-card-header,
.cmi-card-content
  color: #fff