// Cards
//
// Basic border, background, and padding for content.
//
// Markup:
// <div class="row">
//     <div class="col-xs-12">
//         <div class="card {{modifier_class}}">
//             <p>Basic card example</p>
//             <a>Card link</a>
//         </div>
//     </div>
// </div>
//
// .accent-border-top.accent-border-coral - Card with accent borders
// .u-bg-navy.u-bg-dark - Card with background colors
//
// Styleguide Components.cards


.card,
.card-cells {
  margin-bottom: $line-height-base / 2;
  background-color: $card-bg;
}

.card {
  @include consume-margins();

  border: $card-border-width solid $card-border-color;
  padding: $card-padding;
}

// Card Cells
//
// Cards can be divided into cells for more complex layouts.
//
// Markup:
// <div class="card-cells">
//   <div class="row">
//     <div class="card col-xs-12 col-md-5">
//       <p>Card Cell 1</p>
//     </div>
//     <div class="card col-xs-12 col-md-7">
//       <p>Card cell 2</p>
//     </div>
//   </div>
//   <div class="row">
//     <div class="card col-xs-12 col-md-2">
//        <p>Card Cell 3</p>
//     </div>
//     <div class="card col-xs-12 col-md-10">
//       <p>Card cell 4</p>
//     </div>
//   </div>
// </div>
//
//
// Styleguide Components.cards.cells

.card-cells {
  overflow: hidden;
  box-shadow: inset 0 0 0 $card-border-width $card-cells-border-color;

  .card-cells {
    padding: 0;
  }

  > .row {
    margin-left: 0;
    margin-right: 0;
  }

  .card-cells,
  > .row > .card {
    margin: 0;
    border: 0;
    background: none;

    // HACK: Each cell draws a shadow to its top right, and an inset shadow on
    // its left. Combined with the .card-cell’s inset shadow, the shadows
    // overlap to create "collapsed" borders, similar to a table.
    //
    // The bottom "border" is not drawn, to give the illusion that the cell
    // stretches to the height of whichever column is tallest
    box-shadow: (
      $card-border-width (-$card-border-width) 0 $card-cells-border-color,
      inset $card-border-width 0 0 $card-cells-border-color
    );
  }
}