$card-bg: #efece5;
$card-padding: rem-calc(15);
$card-margin-bottom: rem-calc(20);
$card-font-color: $body-font-color;
$card-border-color: scale-color($card-bg, $lightness: -10%);

@mixin cwui-card {
  .card {
    background: $card-bg;
    color: $card-font-color;
    display: flex;
    flex-direction: column;
    margin-bottom: $card-margin-bottom;
  
    hr {
      margin: .8rem 0;
    }
  }
  
  a.card {
    text-decoration: none;
    transition: transform .1s;
  
    &:hover {
      transform: translateY(-3px);
    }
  
    &:hover,
    &:visited {
      color: inherit;
    }
  }
  
  .card.radius {
    @include border-radius();
  
    .card__header:first-child,
    .card__image:first-child,
    .card__image:first-child img {
      border-radius: $global-radius $global-radius 0 0;
    }
  
    .card__footer:last-child,
    .card__image:last-child,
    .card__image:last-child img {
      border-radius: 0 0 $global-radius $global-radius;
    }
  }
  
  .card__header :last-child,
  .card__block :last-child,
  .card__footer :last-child {
    margin-bottom: 0;
  }
  
  .card__header,
  .card__footer {
    padding: ($card-padding / 2) $card-padding;
  }
  
  .card__header,
  .card__header .card__title,
  .card__image .card__title {
    font-size: rem-calc(14);
  }
  
  .card__header {
    background: #ddd7c8;
  }

  .card__image {
    overflow: hidden;
    position: relative;
  }
  
  .card__footer {
    border-top: 1px solid $card-border-color;
    font-size: rem-calc(14);
  }
  
  .card__block {
    flex-grow: 1;
    padding: $card-padding;
  }
  
  .card__title {
    color: $chico-red;
    font-weight: $global-weight-bold;
    margin-bottom: $header-margin-bottom;
  
    a {
      color: inherit;
      display: block;
      text-decoration: none;
    }
  
    .card__header & {
      margin-bottom: 0;
      text-transform: uppercase;
    }
  }
  
  
  // Variations
  // ------------------------
  
  .card--red,
  .card--black,
  .card--blue {
    .card__header .card__title {
      color: $white;
    }
  }
  
  .card--red {
    .card__header {
      background: #732f30;
    }
  }
  
  .card--black {
    .card__header {
      background: $black;
    }
  }
  
  .card--blue {
    $card-bg: $light-blue;
  
    background: $card-bg;
  
    .card__header {
      background: $dark-blue;
    }
  
    .card__footer {
      border-color: scale-color($card-bg, $lightness: -10%);
    }
  }
  
  [class*="block-grid"] .card {
    margin-bottom: 0;
  }
  
  .card > .file-ext {
    display: none;
  }
}