// Card
//
// Cards contain content and actions about a single subject
//
// Markup:
//  <div class="card">
//      <div class="layout-row justify-content-around align-items-center">
//          <h3 class="mt-0 mb-0">Card Without Padding</h3>
//       </div>
//   </div>
//
// Styleguide Components.Cards
//
.card {
  background-color: #fff;
  box-shadow: 0 3px 10px 0 var(--card-shadow-color);
  transition: box-shadow 0.25s cubic-bezier(0.32, 0.01, 0, 1);
  margin : var(--card-margin-gutter);
  box-sizing: border-box;
  -webkit-box-orient: vertical;
  flex-direction: column;

  &.hoverable:hover {
    box-shadow: 0 16px 32px var(--card-hover-shadow-color);
  }
  &.flat {
    box-shadow: none;
    background: white;
  }

  &.outlined {
    background: white;
    border: thin solid rgba(var(--primary-rgb), 0.1);
    box-shadow: none;
  }

  .card-text {
    padding: 1em;
  }

  .card-actions {
    padding: 1em 0.8em;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

// Card Text
//
// Cards contain content and actions about a single subject
//
// Markup:
//    <div class="card">
//      <section class="card-text">
//       <div class="layout-row justify-content-around align-items-center">
//          <h3 class="mt-0 mb-0">Card With Padding</h3>
//       </div>
//      </section>
//    </div>
//
// Styleguide Components.Cards.Card Text
//

// Card With Action Buttons
//
// Actions buttons in card to link to another resource
//
// Markup:
//    <div class="card">
//      <section class="card-text">
//       <div class="layout-row justify-content-around align-items-center">
//          <h3 class="mt-0 mb-0">Card With Padding</h3>
//       </div>
//      </section>
//      <section class="card-actions">
//          <button class="danger flat">
//             Cancel
//          </button>
//          <button>
//             Confirm?
//          </button>
//      </section>
//    </div>
//
// Styleguide Components.Cards.Card Text
//

// Card Outlined
//
// Card with no box shadow with border
//
// Markup:
//    <div class="card outlined">
//      <section class="card-text">
//       <div class="layout-row justify-content-around align-items-center">
//          <h3 class="mt-0 mb-0">Card Outlined</h3>
//       </div>
//      </section>
//    </div>
//
// Styleguide Components.Cards.Card Outlined
//

// Card Flat
//
// Card with no box shadow
//
// Markup:
//    <div class="card flat">
//      <section class="card-text">
//       <div class="layout-row justify-content-around align-items-center">
//          <h3 class="mt-0 mb-0">Card With Padding</h3>
//       </div>
//      </section>
//    </div>
//
// Styleguide Components.Cards.Card Flat
//