.mds-c-scaffold-card-group {
  &:not(:last-child) {
    margin-bottom: 3rem;
  }

  &__add {
    padding: var(--mds-d-spacing--xl) var(--mds-d-spacing--sm)
      var(--mds-d-spacing--xl)
      calc(var(--mds-d-spacing--xxl) + var(--mds-d-spacing--xs));
  }

  &__cards {
    &.mds-is-droppable {
      background-color: var(--mds-t-background-color--accent-muted);
      box-shadow:
        calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
          var(--mds-t-background-color--accent-muted),
        var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
          var(--mds-t-background-color--accent-muted);
      cursor: grabbing;
    }
  }

  &__title {
    @mixin mds-m-heading--size-sm;

    border-bottom: 1px solid var(--mds-t-border-color--secondary);
    color: var(--mds-t-text-color--primary);
    padding-bottom: var(--mds-d-spacing--med);

    small {
      color: var(--mds-t-text-color--tertiary);
    }
  }
}

.mds-c-scaffold-cards {
  @each $spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-$(spacing) {
      .mds-c-scaffold-card {
        margin: var(--mds-d-spacing--$(spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  @each $x-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-vertical-$(x-spacing) {
      .mds-c-scaffold-card {
        margin-bottom: var(--mds-d-spacing--$(x-spacing));
        margin-top: var(--mds-d-spacing--$(x-spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  @each $y-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-horizontal-$(y-spacing) {
      .mds-c-scaffold-card {
        margin-left: var(--mds-d-spacing--$(y-spacing));
        margin-right: var(--mds-d-spacing--$(y-spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-bottom-$(b-spacing) {
      .mds-c-scaffold-card {
        margin-bottom: var(--mds-d-spacing--$(b-spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  @each $l-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-left-$(l-spacing) {
      .mds-c-scaffold-card {
        margin-left: var(--mds-d-spacing--$(l-spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  @each $t-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-top-$(t-spacing) {
      .mds-c-scaffold-card {
        margin-top: var(--mds-d-spacing--$(t-spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  @each $r-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-right-$(r-spacing) {
      .mds-c-scaffold-card {
        margin-right: var(--mds-d-spacing--$(r-spacing));

        &:last-child {
          margin-bottom: 0.25rem;
        }
      }
    }
  }

  .mds-c-scaffold-card {
    &:last-child {
      margin-bottom: 0.25rem;
    }
  }

  &--empty {
    min-height: 3rem;
  }
}