/// Provides styles for the Card element.
/// @group cards
/// @author Richard Davis
/// @example
///   // A plain card
///   <div class="Card">
///   </div>
///
///   // A medium-sized card
///   <div class="Card Card--medium">
///   </div>
///
///   // A small-sized card
///   <div class="Card Card--small">
///   </div>
///
///   // A card with a thick top border
///   <div class="Card--topBorder">
///   </div>
///
///   // A card with a thick right border
///   <div class="Card--rightBorder">
///   </div>
///
///   // A card with a thick bottom border
///   <div class="Card--bottomBorder">
///   </div>
///
///   // A card with a thick left border
///   <div class="Card--leftBorder">
///   </div>
///
///   // A card with a card header
///   <div class="Card">
///     <div class="Card__header">
///     </div>
///   </div>
///
///   // A card with a card header and header text
///   <div class="Card">
///     <div class="Card__header">
///       <p class="Card__header-text">Lorem Ipsum</p>
///     </div>
///   </div>
///
///   // A card with a card body
///   <div class="Card">
///     <div class="Card__body">
///     </div>
///   </div>
///
///   // A card with a card body and title
///   <div class="Card">
///     <div class="Card__body">
///       <h2 class="Card__title">Lorem Ipsum</p>
///     </div>
///   </div>
///
///   // A card with a card body and spaced title
///   <div class="Card">
///     <div class="Card__body">
///       <h2 class="Card__title--spaced">Lorem Ipsum</p>
///     </div>
///   </div>
///
///   // A card with a card footer
///   <div class="Card">
///     <div class="Card__footer">
///     </div>
///   </div>
///
///   // A card with a card footer and footer text
///   <div class="Card">
///     <div class="Card__footer">
///       <p class="Card__footer-text">Lorem Ipsum</p>
///     </div>
///   </div>
///
///   // A card with a card header, body, and footer
///   <div class="Card">
///     <div class="Card__header">
///     </div>
///     <div class="Card__body">
///     </div>
///     <div class="Card__footer">
///     </div>
///   </div>
.Card {
  @extend %default-border-styling;

  width: 97%;
  word-wrap: break-word;
  padding: 0;
  margin: spacing-size(2) auto;

  @include breakpoint-s {
    width: 75%;
  }

  @include breakpoint-m {
    width: 65%;
  }

  @include breakpoint-l {
    width: 55%;
  }

  @include breakpoint-xl {
    width: 45%;
  }

  &--topBorder {
    @extend .Card;

    @include top-border-accent($black, grayscale-color(30));
  }

  &--rightBorder {
    @extend .Card;

    @include right-border-accent($black, grayscale-color(30));
  }

  &--bottomBorder {
    @extend .Card;

    @include bottom-border-accent($black, grayscale-color(30));
  }

  &--leftBorder {
    @extend .Card;

    @include left-border-accent($black, grayscale-color(30));
  }

  &--medium {
    width: 97%;

    @include breakpoint-s {
      width: 70%;
    }

    @include breakpoint-m {
      width: 60%;
    }

    @include breakpoint-l {
      width: 50%;
    }

    @include breakpoint-xl {
      width: 40%;
    }
  }

  &--small {
    width: 97%;

    @include breakpoint-s {
      width: 66%;
    }

    @include breakpoint-m {
      width: 55%;
    }

    @include breakpoint-l {
      width: 33%;
    }
  }

  &__header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    font-size: 85%;
    line-height: 1.5;
    margin: 0;
    padding: spacing-size(2);

    &-text {
      margin: 0;
    }
  }

  &__body {
    padding: spacing-size(3);

    @include breakpoint-m {
      padding: spacing-size(4);
    }
  }

  &__title {
    @extend %heading-2-style;

    font-family: $heading-bold-font-family;
    color: $black;
    text-transform: uppercase;
    text-align: center;
    margin: spacing-size(3) 0 spacing-size(1);

    &--spaced {
      @extend .Card__title;

      margin: spacing-size(3) 0 spacing-size(4);
    }
  }

  &__footer {
    font-size: 85%;
    line-height: 1.5;
    margin: 0;
    padding: spacing-size(2);

    &-text {
      margin: 0;
    }
  }
}