@import "../css/colors"
@import "../css/vars"

$card-padding = 20px

// A child of the card with this mixin ignores the cards padding.
full-width()
  margin-left: (-1 * $card-padding)
  margin-right: (-1 * $card-padding)

:local(.card)
  position: relative;
  font-family : $sansserif
  font-size : 14px
  position : relative
  transition-property : all
  transition-duration : 0.5s
  transition-timing-function : ease
  transition-delay : initial
  // background-color: $backgroundGray
  border: solid 1px $borderGray
  padding: $card-padding
  flex-grow: 1
  background-color: $white

:local(.active)
  // box-shadow : 0 2px 4px rgba(0, 0, 0, .2)
  // background-color: $backgroundGray
  border: solid 1px $borderGray

:local(.disabled)
  // background-color : #F9F9F9
  opacity : .4
  animation : none

:local(.card .notification)
  //full-width()
  // background-color: transparent

:local(.card .list)
  full-width()
  //border-top: 1px solid $white
  border-bottom: 1px solid $white
  background-color: $white

:local(.card .formrow)
  full-width()

:local(.toggle)
  display: inline-block
  position: absolute
  top: 0
  right: 0
  padding: 15px
  cursor: pointer
  z-index: 100