// Please try to maintain the same code style as outlined here:
// https://github.com/lintelio/lintel/blob/master/CONTRIBUTING.md

@import 'cards-vars';
@import 'cards-functions';
@import 'cards-mixins';


// Base
// ----
.card {
  background: $card-bg;
  border: 1px solid $card-border-dark;
  border-radius: $card-border-radius;
  margin-bottom: $cushion-base;
  max-width: 100%;
  @if $card-box-shadow {
    box-shadow: $card-box-shadow;
  }
}


// Body
// ----
.card-body {
  padding: $card-body-padding-y $card-body-padding-x;
}


// Header
// ------
.card-header {
  @include clearfix;
  border-bottom: 1px solid $card-border;
  color: $card-header-text;
  display: block;
  padding: $card-header-padding-y $card-header-padding-x;
}

@include mq($min: $screen-sm-min) {
  .card-header {
    overflow: hidden;
    white-space: nowrap;
  }
}

.card-header-actions {
  display: inline-block;
  margin-right: -100%;
  text-align: right;
  width: 100%;
}

.card-heading {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle; // line up with .btns

  > a {
    color: inherit;
    text-decoration: none;
  }
}


// Footer
// ------
.card-footer {
  border-top: 1px solid $card-border;
  display: block;
  padding: $card-footer-padding-y $card-footer-padding-x;
}

.card-footer-actions {
  @extend .card-header-actions;
}


// Image
// -----
.card-img {
  padding: 0;

  > img {
    display: block;
    width: 100%;
  }

  &.card-header {
    border-top-left-radius: ($card-border-radius - 1);
    border-top-right-radius: ($card-border-radius - 1);
    overflow: hidden;
  }

  &.card-footer {
    border-bottom-left-radius: ($card-border-radius - 1);
    border-bottom-right-radius: ($card-border-radius - 1);
    overflow: hidden;
  }
}