
// @optional core/multiple/multiple.scss
// @require decorators/target/target.scss
// @require widgets/container/container.scss

//TODO: Maybe use slimmer `.card-header` and `.card-footer`

/* CARD */

.card {

  @extend %widget;
  @extend %targetable;
  @include children-no-gutter ();
  @include color ( $card-color, $card-color-force, $card-color-basic );
  display: flex;
  border-radius: $card-border-radius;

  /* HEADER / BLOCK / FOOTER */

  &-header,
  &-block,
  &-footer {

    &:not(.multiple) {
      @extend %container;
      @include color ( $card-section-color, $card-section-color-force, $card-section-color-basic );
      border-radius: 0;
    }

    &.multiple > * {
      border-radius: 0;
      margin-bottom: 0 !important;
    }

  }

  /* HEADER / FOOTER */

  &-header,
  &-footer {
    flex-shrink: 0; // So that when there's an overflow just `.card-block` scrolls
  }

  /* BLOCK */

  &-block {
    flex: 1 1 auto; // IE-10/11 sets flex-shrink to 0
    overflow: auto;
  }

  /* BORDER RADIUS */

  > *,
  > .table {
    border-radius: 0;
  }

}
