@import "../utilities/mixins"

$card-color: var(--text, #{$text}) !default
$card-background-color: var(--scheme-main, #{$scheme-main}) !default
$card-shadow: var(--shadow, #{$shadow}) !default
$card-radius: 0.25rem !default

$card-header-background-color: transparent !default
$card-header-color: var(--text-strong, #{$text-strong}) !default
$card-header-padding: 0.75rem 1rem !default
$card-header-shadow: 0 0.125em 0.25em rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$card-header-weight: var(--weight-bold, #{$weight-bold}) !default

$card-content-background-color: transparent !default
$card-content-padding: 1.5rem !default

$card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid var(--border-light, #{$border-light}) !default
$card-footer-padding: 0.75rem !default

$card-media-margin: var(--block-spacing, #{$block-spacing}) !default

$css-vars-map: ('card-background-color': ($card-background-color),'card-shadow': ($card-shadow),'card-color': ($card-color),'card-radius': ($card-radius),'card-header-background-color': ($card-header-background-color),'card-header-shadow': ($card-header-shadow),'card-header-color': ($card-header-color),'card-header-weight': ($card-header-weight),'card-header-padding': ($card-header-padding),'card-content-background-color': ($card-content-background-color),'card-content-padding': ($card-content-padding),'card-footer-background-color': ($card-footer-background-color),'card-footer-border-top': ($card-footer-border-top),'card-footer-padding': ($card-footer-padding),'card-media-margin': ($card-media-margin))
// --card-background-color: #{$card-background-color}
// --card-shadow: #{$card-shadow}
// --card-color: #{$card-color}
// --card-radius: #{$card-radius}
// --card-header-background-color: #{$card-header-background-color}
// --card-header-shadow: #{$card-header-shadow}
// --card-header-color: #{$card-header-color}
// --card-header-weight: #{$card-header-weight}
// --card-header-padding: #{$card-header-padding}
// --card-content-background-color: #{$card-content-background-color}
// --card-content-padding: #{$card-content-padding}
// --card-footer-background-color: #{$card-footer-background-color}
// --card-footer-border-top: #{$card-footer-border-top}
// --card-footer-padding: #{$card-footer-padding}
// --card-media-margin: #{$card-media-margin}

// If declare variables only in .card selector
// .card-item, .card-header etc. wont have acces to it
// so if $at-root is false, use starts-with selector
.card, [class^="card-"]
  +registerCSSVars($css-vars-map, $at-root)

.card
  background-color: var(--card-background-color)
  border-radius: var(--card-radius)
  box-shadow: var(--card-shadow)
  color: var(--card-color)
  max-width: 100%
  position: relative

%card-item
  &:first-child
    border-top-left-radius: var(--card-radius)
    border-top-right-radius: var(--card-radius)
  &:last-child
    border-bottom-left-radius: var(--card-radius)
    border-bottom-right-radius: var(--card-radius)

.card-header
  @extend %card-item
  background-color: var(--card-header-background-color)
  align-items: stretch
  box-shadow: var(--card-header-shadow)
  display: flex

.card-header-title
  align-items: center
  color: var(--card-header-color)
  display: flex
  flex-grow: 1
  font-weight: var(--card-header-weight)
  padding: var(--card-header-padding)
  &.is-centered
    justify-content: center

.card-header-icon
  +reset
  align-items: center
  cursor: pointer
  display: flex
  justify-content: center
  padding: var(--card-header-padding)

.card-image
  display: block
  position: relative
  &:first-child
    img
      border-top-left-radius: var(--card-radius)
      border-top-right-radius: var(--card-radius)
  &:last-child
    img
      border-bottom-left-radius: var(--card-radius)
      border-bottom-right-radius: var(--card-radius)

.card-content
  @extend %card-item
  background-color: var(--card-content-background-color)
  padding: var(--card-content-padding)

.card-footer
  @extend %card-item
  background-color: var(--card-footer-background-color)
  border-top: var(--card-footer-border-top)
  align-items: stretch
  display: flex

.card-footer-item
  align-items: center
  display: flex
  flex-basis: 0
  flex-grow: 1
  flex-shrink: 0
  justify-content: center
  padding: var(--card-footer-padding)
  &:not(:last-child)
    +ltr-property("border", var(--card-footer-border-top))

// Combinations

.card
  .media:not(:last-child)
    margin-bottom: var(--card-media-margin)