/*------------------------------------
  Card
------------------------------------*/

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (column-count: cc) {
      @each $card-count, $length in $card-count {
        .card#{$infix}-#{$card-count}-count { #{$prop}: $length; }
      }
    }

    @each $prop, $abbrev in (column-gap: cg) {
      @each $card-gap-sizes, $gap in $card-gap-sizes {
        .card#{$infix}-#{$card-gap-sizes}-gap { #{$prop}: $gap; }
      }
    }

    .card#{$infix}-columns {
      orphans: 1;
      widows: 1;

      .card {
        display: inline-block; // Don't let them vertically span multiple columns
        width: 100%; // Don't let their width change
      }
    }
  }
}

.card {
  border-width: 0;
  box-shadow: $card-box-shadow;
}

@include media-breakpoint-up(sm) {
  .card-group > .card + .card {
    border-left: $card-border-width solid $card-border-color;
  }
}

/* Background Color */
.card-bg-light {
  background-color: $card-bg-light;

  &:hover {
    background-color: $card-bg-light-hover;
  }
}

/* Frame */
.card-frame {
  border: $card-frame-border-width $card-frame-border-type $card-frame-border-color;
  box-shadow: none;
  transition: $card-frame-transition;

  &-highlighted,
  &:hover {
    border-color: $card-frame-hover-border-color;
  }
}

/* Shadow On Hover */
.card-hover-shadow {
  box-shadow: none;

  &:hover {
    box-shadow: $card-hover-shadow-box-shadow;
  }
}

/* Collapse */
.card {
  &-collapse {
    padding: 0;
    transition: $card-collapse-transition;

    &:hover {
      background-color: $card-collapse-hover-bg-color;
    }

    .card-body {
      color: $card-body-color;
    }
  }

  // Collapsed active option
  &-btn {
    color: $card-btn-color;
    text-align: left;
    white-space: inherit;

    &-toggle {
      display: inline-block;
      color: $card-btn-arrow-color;

      &-default {
        display: none;
      }

      &-active {
        display: block;
      }
    }

    &.collapsed {
      .card-btn-toggle-default {
        display: block;
      }

      .card-btn-toggle-active {
        display: none;
      }
    }
  }
}

/* IE image rendering fix */
.card-img-top,
.card-img-bottom {
  min-height: 1px;
}