// Cards
.c-card {
  @include card;

  &-header {
    @include card-header;
  }

  &-content {
    @include card-content;
  }

  &-footer {
    @include card-footer;
  }
}


.c-card-group {
  display: flex;
  flex-direction: column;

  .c-card {
    margin-bottom: $gutter;
  }

  &#{&}-collapsed {
    > .c-card {
      margin-bottom: $space-0;
      border-radius: $radius-0;

      &:first-child {
        border-top-left-radius: $card-border-radius;
        border-top-right-radius: $card-border-radius;

        //Overriding the rule from the non-chained .c-card-group-collapsed
        border-bottom-left-radius: $radius-0;
      }

      &:last-child {
        border-bottom-left-radius: $card-border-radius;
        border-bottom-right-radius: $card-border-radius;

        //Overriding the rule from the non-chained .c-card-group-collapsed
        border-top-right-radius: $radius-0;
      }

      + .c-card {
        border-top: $space-0;
      }
    }
  }

  &-collapsed {
    display: flex;
    flex-direction: column;

    > .c-card {
      border-radius: $radius-0;

      &:first-child {
        border-top-left-radius: $card-border-radius;
        border-bottom-left-radius: $card-border-radius;
      }

      &:last-child {
        border-top-right-radius: $card-border-radius;
        border-bottom-right-radius: $card-border-radius;
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .c-card-group {
    flex-flow: row wrap;
    margin-right: -$gutter;
    margin-left: -$gutter;

    .c-card {
      display: flex;
      flex: 1 0 0%;
      flex-direction: column;
      margin-right: $gutter;
      margin-left: $gutter;
    }

    &#{&}-collapsed {
      margin-right: $space-0;
      margin-left: $space-0;

      > .c-card {
        margin-right: $space-0;
        margin-left: $space-0;
        margin-bottom: $space-0;

        &:first-child {
          border-top-right-radius: $radius-0;
          border-bottom-left-radius: $card-border-radius;
        }

        &:last-child {
          border-bottom-left-radius: $radius-0;
          border-top-right-radius: $card-border-radius;
        }

        + .c-card {
          border-left: $space-0;
          border-top: $card-border;
        }
      }
    }

    &-collapsed {
      flex-flow: row wrap;

      > .c-card {
        flex: 1 0 0%;
        margin-bottom: $space-0;

        + .c-card {
          margin-left: $space-0;
          border-left: $space-0;
        }
      }
    }
  }
}