/* Inboxes
 * -------------------------------------------------------------------------- */

.inboxes {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.inboxes--feed {
  @media (min-width: 40em) {
    margin-top: var(--base-space);
  }

  .postings--feed-style {
    @media (max-width: 39.95em) {
      padding-top: 0.5em; /* Keep feed entries from clipping page heading */
    }
  }

  .postings--unread .topic {
    border: 1px solid var(--color-unread);

    @media (max-width: 39.95em) {
      border-radius: 0.5em;
      margin-bottom: 0.5em;
    }
  }
}

.inboxes__description {
  [data-list-size-value="0"] & { display: none; }
}

.inboxes__empty {
  display: none;
  margin-top: 2rem;
  text-align: center;

  [data-list-size-value="0"] & { display: block; }
}

.inboxes__empty--padded {
  padding: 6rem 0 8rem;
}

.inbox {
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  margin-top: var(--base-space);

  [data-list-size-value="0"] & { display: none; }

  .postings {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .box-glance,
  .inbox-heading,
  .posting { order: 1; }

  .pagination-link { order: 2; }

  .box-bubbleup__menu { display: none; }
}

.inbox--on-sheet {
  .posting,
  .pagination-link {
    margin-left: calc(var(--sheet-padding) * -1);
    margin-right: calc(var(--sheet-padding) * -1);

    @media (min-width: 40em) {
      padding-left: var(--sheet-padding);
      padding-right: var(--sheet-padding);
    }
  }
}

.inbox--with-sections {
  margin-top: 0 !important;

  /* New For You */
  .posting:not([data-seen]):not([data-bubbled-up]) .posting__status::before {
    display: block;
  }

  .posting__status--unseen::before {
    filter: var(--colorize-orange);
  }

  /* Previously Seen */
  .posting[data-seen]:first-child,
  :not([data-seen]) + .posting[data-seen]:not([data-bubbled-up]) {
    margin-top: var(--base-space);
    padding-top: var(--half-space);
  }

  .posting[data-seen]:not([data-bubbled-up]),
  .pagination-link {
    background-color: var(--color-bg--surface-glint);

    [data-color-scheme="dark"] & { background-color: var(--color-bg--main-thin); }
  }

  article.posting:last-of-type,
  .pagination-link {
    flex: 1;
    padding-bottom: 11rem;
  }
}

/* Special states for unseen items */
.inbox-unseens {
  position: relative;
  margin: var(--quarter-space) 0 0;
  order: 0;

  @media (min-width: 40em) {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  + .inbox-unseens { display: none; }
}

.inbox-heading {
  position: relative;
  margin: var(--quarter-space) 0 0;

  @media (min-width: 40em) {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}

.inbox-heading {
  display: block;

  &[data-posting-count="0"] {
    display: none;
  }
}

.inbox-heading__reader {
  position: absolute;
  top: 0.8rem;
  right: 0;
  z-index: 4;
  padding: 0 0 0 0.8rem;

  [data-posting-count="0"] &,
  [data-posting-count="1"] & {
    display: none;
  }
}

.inbox-heading__none {
  display: none;

  [data-list-unseen-size-value="0"] & {
    display: block;
  }

  .hdg--divider {
    padding-top: 2rem;
  }

  .inbox-heading__nothing-new {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 25vh;
  }
}

.inbox--with-sections {
  .posting--bubbled-up {
    grid-template-columns: calc(2.25em + 1rem) calc(100% - 2.25em - 4rem) 3rem;
    @media (max-width: 39.95em) { padding-right: calc(var(--sheet-padding) - 1rem); }

    .posting__time { display: none !important; }

    .box-bubbleup__menu {
      display: block;
      justify-self: end;

      .popup-menu--right { right: 0rem; }
    }
  }
}

.inboxes--bubble-up {
  .posting--will-bubble-up {
    grid-template-columns: calc(2.25em + 1rem) calc(100% - 2.25em - 9rem) 8rem;
    @media (max-width: 39.95em) { padding-right: calc(var(--sheet-padding) / 2); }

    .posting__time { display: none !important; }

    .box-bubbleup__menu {
      display: block;
      justify-self: end;

      .popup-menu--right { right: 0rem; }
    }
  }
}