.mds-c-figure-cards-group {
  &.mds-is-droppable {
    min-height: 10rem;
    position: relative;
  }

  &.mds-is-drop-zone {
    height: 100%;
    overflow: hidden;

    & > *:not(.mds-c-figure-cards-group__dropzone) {
      visibility: hidden;
    }
  }

  &.mds-is-undroppable {
    height: 100%;
    overflow: hidden;
  }

  &__dropzone {
    align-items: center;
    border: 2px dashed var(--mds-t-border-color--primary);
    border-radius: var(--mds-d-border-radius--large);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000;

    &.mds-is-dragging-over {
      border-color: var(--mds-d-color-green--500);
    }
  }
}

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

        &:first-child {
          margin-top: 0.25rem;
        }

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

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

        &:first-child {
          margin-top: 0.25rem;
        }

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

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

        &:first-child {
          margin-top: 0.25rem;
        }

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

  @each $b-spacing in (xxxl, xxl, xl, lg, med, sm, xs, xxs) {
    &&--margin-bottom-$(b-spacing) {
      .mds-c-figure-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-figure-card {
        margin-left: var(--mds-d-spacing--$(l-spacing));

        &:first-child {
          margin-top: 0.25rem;
        }

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

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

        &:first-child {
          margin-top: 0.25rem;
        }

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

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

        &:first-child {
          margin-top: 0.25rem;
        }

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

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

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