@include exports('md-card') {
  .md-card {
    padding: 0;
    line-height: $base-line-height;
    position: relative;
    display: flex;
    color: $text-color;
    vertical-align: top;
    background-color: $card-color;
    border-radius: $card-border-radius;
    box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18);
    flex-direction: column;
    &--clickable {
      &:hover {
        box-shadow: 2px 6px 10px rgba(52, 53, 55, 0.18);
      }
      &.active {
        box-shadow: 1px 3px 8px rgba(52, 53, 55, 0.18);
      }
      &:focus {
        box-shadow: 2px 6px 10px rgba(0,160,209,.75);
      }
    }

    .md-card-section {
      width: 100%;
      border-top-right-radius: $card-border-radius;
      border-top-left-radius: $card-border-radius;
      @include vr-spacing(ph, 1);
      @include vr-spacing(pv, 1);
    }

    .md-card-section--full {
      padding: 0;
      width: 100%;
    }
  }
}