@import '../utilities/colors'

.material-card
  box-sizing: border-box
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)
  background-color: $white
  display: flex
  flex-direction: column
  border-radius: 4px

.material-card__body


.material-card__media
  box-sizing: border-box
  position: relative
  height: 200px
  overflow: hidden

  img
    width: 100%
    height: 100%
    object-fit: cover

.material-card__primary
  padding: 16px

.material-card__secondary
  padding: 0 16px 8px
  color: $black-alpha-60

.material-card__title
  margin: 0

.material-card__subtitle
  margin: 0
  color: $muted

.material-card__actions
  box-sizing: border-box
  display: flex
  flex-direction: row
  align-items: center
  justify-content: space-between
  padding: 8px
  min-height: 52px

.material-card__actions-buttons
  box-sizing: border-box
  display: flex
  flex-direction: row
  align-items: center

.material-card__actions-icons
  box-sizing: border-box
  display: flex
  flex-direction: row
  flex-grow: 1
  align-items: center
  justify-content: flex-end
  margin: -6px 0