/* Set Aside grouping, measured from HEY's Set Aside page: a dashed zone to
   drag threads into, grouped threads in soft boxes with "Mark all as ✓
   Done", and a violet dashed zone for a new group while dragging. */

.box-group { margin-top: -24.75px; padding: 24.75px 0; }

.box-group__contents {
  position: relative;
  display: block;
  padding: 12.375px;
  border: 2px solid rgb(var(--warm-rgb) / 0.5);
  border-radius: 9.9px;
  background-color: rgb(var(--ink-rgb) / 0.03);
  transition: background-color 150ms ease-in, border-color 150ms ease-in;
}

.box-group__message {
  font-size: 15.4px;
  line-height: 21.56px;
  color: rgb(var(--ink-rgb) / 0.66);
  text-align: center;
}

/* "Drag emails here to group them…" shows only while there are no groups */
.grouped-postings__message--empty { display: none; }
.grouped-postings--empty .grouped-postings__message--empty { display: block; }
.grouped-postings__message--empty .box-group__contents { border-style: dashed; }

/* The zone that makes a new group appears only while dragging */
.box-group--new { display: none; }
.box-group--new .box-group__contents { border: 2px dashed #3072dd; }

.set-aside--dragging .grouped-postings__message--empty { display: none; }
.set-aside--dragging .box-group--new { display: block; }
.set-aside--dragging .box-group__message { color: #3072dd; }
.set-aside--dragging .grouped-postings--empty .box-group--new .box-group__contents { animation: set-aside-pulse 1.3s ease infinite both; }
/* Rows stay still under the pointer so the zones get the drag events */
.set-aside--dragging .posting { pointer-events: none; }

.box-group--dragging .box-group__contents {
  border: 2px dashed #3072dd;
  background-color: rgb(48 114 221 / 0.15);
}

@keyframes set-aside-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(48 114 221 / 0); }
  50% { box-shadow: 0 0 0 6px rgb(48 114 221 / 0.15); }
}

/* Grouped rows fill the box rather than bleeding into the sheet padding */
.box-group .workflow-entry { padding: 0; }
.box-group .set-aside-entry + .set-aside-entry { margin-top: 0; }

.box-group__done-form { margin: 0; }
.box-group__done-button {
  position: absolute;
  top: -16.5px;
  right: 8.25px;
  padding: 3.96px 10.56px;
  border: 2px solid rgb(var(--shade-rgb) / 0.1);
  border-radius: 33px;
  background: var(--color-sheet);
  color: #3072dd;
  font: 500 13.2px/18.48px var(--font);
  cursor: pointer;
}
.box-group__done-button:hover { background: rgb(48 114 221 / 0.06); }
.box-group__done-button:focus { outline: none; }
.box-group__done-button:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }

/* The list is a drop target too: dropping there takes a thread out of its group */
.set-aside__list { position: relative; }
.set-aside--dragging .set-aside__list { min-height: 66px; }
.set-aside__list.box-group--dragging::before {
  content: "";
  position: absolute;
  inset: -2px 53px;
  border: 2px dashed #3072dd;
  border-radius: 9.9px;
  background-color: rgb(48 114 221 / 0.15);
  pointer-events: none;
}

.set-aside-entry[draggable="true"] { cursor: grab; }

@media (max-width: 640px) {
  .set-aside__list.box-group--dragging::before { inset: -2px 14px; }
}