/* ==========================================================================
 * Slats
 * ========================================================================== */

.mds-c-slat-group {
  &:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}

.mds-c-slat-group__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-slat-group__slats {
  &.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;
  }
}

.mds-c-slat-group__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));
}

.mds-c-slats {
  position: relative;

  &--no-footer {
    & > .mds-c-slat:last-child {
      box-shadow: none;
    }
  }

  &::before {
    content: '';
    display: block;
    height: 100%;
    left: calc(var(--mds-d-spacing--xxl) * -1);
    position: absolute;
    top: 0;
    width: var(--mds-d-spacing--xxl);
  }
}