$card-bg-color: $white !default;
$card-radius: 4px !default;
$card-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !default;

$card-header-padding: 10px !default;

$card-body-padding: 25px 15px !default;
$card-body-text-color: $darker-grey !default;

$card-footer-item-padding: 8px 10px !default;
$card-footer-border-color: $grey-lighter !default;
$card-footer-min-height: 64px !default;


//  Variants
$image-card-padding: 5px !default;
$image-card-radius: $card-radius !default;
$image-card-content-bg-color: transparentize($white, .2) !default;
$image-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !default;


.card {
  display: flex;
  flex-direction: column;
  border-radius: $card-radius;
  overflow: hidden;
  box-shadow: $card-shadow;
  position: relative;
  background-color: $card-bg-color;

  .card-header {
    display: flex;
    padding: $card-header-padding;
  }

  .card-body {
    flex: 1;
    padding: $card-body-padding;
    color: $card-body-text-color;
  }

  .card-footer {
    display: flex;
    min-height: $card-footer-min-height;
    border-top: 1px solid $card-footer-border-color;

    .card-footer-item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      padding: $card-footer-item-padding;
    }

    .card-footer-item:first-child:not(:last-child) {
      justify-content: flex-start;
    }

    .card-footer-item:last-child:not(:first-child) {
      justify-content: flex-end;
    }
  }

  //
  .card-actions {
    margin-left: auto;

    a, button {
      background-color: transparent;
      color: currentColor;
      border: none;
      cursor: pointer;
      padding: 0;
    }
  }

  //  Image background
  &.has-image-bg {
    padding: $image-card-padding;

    .card-image {
      position: absolute;
      left: $image-card-padding;
      top: $image-card-padding;
      width: calc(100% - #{$image-card-padding} * 2);
      height: calc(100% - #{$image-card-padding} * 2);
      border-radius: $image-card-radius;
      overflow: hidden;
      z-index: 0;
      box-shadow: $image-card-shadow;
    }

    .card-image img {
      min-width: 100%;
      height: 100%;
    }

    .card-header, .card-content {
      z-index: 1;
    }

    .card-content::before {
      content: '';
      display: block;
      padding-top: 50%;
    }

    .card-body, .card-footer {
      background-color: $image-card-content-bg-color;
    }

    .card-footer {
      border: none;
    }
  }
}