.grouped-postings {
  + .postings.box-group--dragging {
    background-color: var(--color-bg--tertiary);
    position: relative;

    &::before {
      content: "";
      pointer-events: none;
      position: absolute;
      top: -2px;
      right: -2px;
      bottom: -2px;
      left: -2px;
      border: 2px dashed var(--color-tertiary);
      border-radius: 0.5em;
    }
  }
}

.grouped-postings__message--empty {
  display: none;
  text-align: center;

  .box-group__contents { border-style: dashed; }
  .inbox:not(.grouped-postings--dragging) .grouped-postings--empty & { display: grid; }
}

.grouped-postings--dragging {
  .posting { pointer-events: none; }
  .postings { min-height: 6rem; }
}

.box-group {
  margin-top: calc(var(--base-space) * -1);
  padding: var(--base-space) 0;
}

.box-group__contents {
  position: relative;
  background-color: var(--color-bg--receded);
  border: 2px solid var(--color-shadow);
  padding: var(--half-space);
  border-radius: 0.5em;
  transition: background-color, border-color, border-style 150ms ease-in;
  display: block;
}

.box-group__message {
  font-size: var(--font-size-x-small);
  color: var(--color-txt--subtle);
  place-self: center;

  .box-group--new:not(.box-group--empty) & { display: none; }
}

.box-group__message--empty {
  display: none;

  .grouped-postings--empty & { display: block; }
  .grouped-postings--dragging & { color: var(--color-tertiary); }
}

.box-group__message--populated {
  display: block;

  .grouped-postings--empty & { display: none; }
  .grouped-postings--dragging & { color: var(--color-tertiary); }
}

.box-group__done-button {
  position: absolute !important;
  top: calc(var(--base-space) * -1);
  right: var(--half-space);
  border: 2px solid var(--color-shadow--dark) !important;
}

.box-group--dragging .box-group__contents {
  border-radius: 0.5em;
  background-color: var(--color-bg--tertiary);
  border: 2px dashed var(--color-tertiary);
}

.box-group--empty { display: none; }

.box-group--new {
  &.box-group--empty { display: none; }

  .box-group__contents {
    border: 2px dashed var(--color-tertiary);

    .grouped-postings--empty & { animation: pulsing-glow 1.3s infinite both; }
    .grouped-postings--dragging & { display: grid; }
  }

  form { display: none; }
  .box-group__message { color: var(--color-tertiary); }
  .grouped-postings--dragging & { display: block; }
  .grouped-postings:not(.grouped-postings--empty) &.box-group--empty {
    animation: fade-in-down 0.3s both ease-in-out;
  }
}

.posting--dragging {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  .posting__body,
  .posting__body:hover {
    background: var(--color-bg--sheet) linear-gradient(to right, var(--color-bg--secondary-glint), var(--color-bg--secondary-glint)) !important;
  }
}

.posting--ghosted { opacity: 0.3; }