$card-default-height: 9rem !default;
$card-double-height: $card-default-height * 2 + $grid-gutter-width;

.card {
  --card-default-height: #{$card-default-height};
  margin-bottom: $grid-gutter-width;
  box-shadow: $card-shadow;

  // Make tiles from standard sizes
  // This allow proper alignement across multiple rows/cols
  &.card-tile {
    min-height: var(--card-default-height);

    .card-img-top {
      width: 100%;
      height: calc(var(--card-default-height) + $grid-gutter-width);
      object-fit: cover;
    }

    .card-img-top+.card-body {
      min-height: var(--card-default-height);
    }
  }

  &.card-double {
    --card-default-height: #{$card-double-height};
  }

  &.card-full {
    height: calc(100% - ($grid-gutter-width));
  }

  .card-img-svg {
    font-size: 1.125rem;
    text-anchor: middle;
  }

  // Top right badges
  .card-badge {
    position: absolute;
    right: $spacer;
    top: $spacer;

    background: $card-badge-bg;
    border-radius: 50%;
    width: $card-badge-size;
    height: $card-badge-size;
    align-items: center;
    justify-content: center;
    display: flex;

    l-i {
      --size: 18px;
    }
  }

  // Top right actions
  .cards-actions {
    position: absolute;
    right: $spacer;
    top: 0;

    .btn {
      border-radius: 0;
    }

    .btn-group>*:first-child {
      border-bottom-left-radius: $card-border-radius;
    }

    .btn-group>.btn:last-child {
      border-bottom-right-radius: $card-border-radius;
    }

    .btn-group>.dropdown:last-child .btn {
      border-bottom-right-radius: $card-border-radius;
    }
  }

  .card-header {
    border-bottom-width: 1px;
  }

  .card-cover {
    background-color: $primary;
    background-image: escape-svg($default-pattern);
    height: 10rem;
    background-position: center;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  }

  .card-title {
    font-size: $card-title-font-size;
    font-weight: $card-title-font-weight;
    color: $card-title-color;
  }

  .card-subtitle {
    font-weight: $font-weight-normal;
  }

  // Allow alignment of table content
  .card-table {
    margin-bottom: 0;
  }

  .card-table tr td:first-child,
  .card-table tr th:first-child {
    padding-left: $card-spacer-x;
  }

  .card-table tr td:last-child,
  .card-table tr th:last-child {
    padding-right: $card-spacer-x;
  }

  // Responsive card images by default
  .card-img,
  .card-img-top,
  .card-img-bottom {
    @include img-fluid;
  }
}