/* Collections
 * -------------------------------------------------------------------------- */

.collection.sheet {
  @media (max-width: 39.95em) {
    background-color: transparent;
  }

  .hdg--divider { z-index: 2; }
}

.collection__header {
  @media (max-width: 39.95em) {
    padding: 0 var(--page-padding) var(--page-padding);
    margin-left: var(--negative-page-padding);
    margin-right: var(--negative-page-padding);
    box-shadow: 0 2px 4px var(--color-shadow);
  }
}

.collection__scrollers {
  @media (max-width: 39.95em) {
    padding: 0 var(--page-padding) 0.75em;
    margin-left: var(--negative-page-padding);
    margin-right: var(--negative-page-padding);
    background: var(--color-bg--thread);
  }
}

.collection__section {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  @media (max-width: 39.95em) {
    width: auto;
    max-width: none;
    margin-left: var(--negative-page-padding);
    margin-right: var(--negative-page-padding);
    padding: 0 0.5em;
  }
}

.collection__section-card {
  @media (max-width: 39.95em) {
    width: auto;
    max-width: none;
    padding: 1rem var(--page-padding) 0;
    margin-left: var(--negative-page-padding);
    margin-right: var(--negative-page-padding);
    background: var(--color-bg--entry-sheet);
    box-shadow: 0 0 5px var(--color-shadow--dark);
  }
}

.collection-entries {
  position: relative;
  flex-direction: column;
  align-items: flex-start;

  @media (max-width: 39.95em) {
    z-index: 1;
  }

  @media (min-width: 40em) {
    &::before {
      content: " ";
      top: 2rem;
      bottom: 2rem;
      left: 50%;
      position: absolute;
      border-left: 2px solid var(--color-tertiary);
    }

    .entry__body {
      margin: 0;
    }
  }

  .entry {
    padding: 1em !important;

    @media (min-width: 40em) {
      width: 48% !important;
      padding: var(--base-space) 2rem var(--base-space) 0;

      &[data-group-tag="even"] {
        align-self: flex-end;
        padding-top: var(--double-space);
        padding-left: 2rem;
        padding-right: 0;
      }
    }

    @media (max-width: 39.95em) {
      /* Left-side vertical timeline rule */
      &::after {
        content: "";
        position: absolute;
        top: calc(-2.75em / 2 - 1px);
        bottom: calc(-2.75em / 2 - 1px);
        width: 2px;
        background: var(--color-tertiary);
        left: 3.5rem;
        z-index: -1;
      }

      &[data-group-tag="even"]::after {
        left: auto;
        right: 3.5rem;
      }

      &:last-of-type {
        margin-bottom: 0;
        box-shadow: 0 -3px 5px var(--color-shadow--light);

        &::after { bottom: 0; }
      }

      &[data-group-tag="odd"] + [data-group-tag="even"],
      &[data-group-tag="even"] + [data-group-tag="odd"] { /* For group + group without a date divider between them */
        margin-top: 2em;

        &::after { top: calc(-2.75em / 2); }

        &::before {
          content: "";
          position: absolute;
          top: calc(-2.75em / 2);
          left: 3.5rem;
          right: 3.5rem;
          height: 2px;
          background: var(--color-tertiary);
        }
      }
    }
  }

  .entry--shadowed {
    @media (min-width: 40em) {
      align-self: center !important;
      margin-top: 1em !important;

      + .entry--shadowed { margin-top: 0 !important; }
    }

    .entry-menu { display: block !important; }
  }

  .collection-entries__date + .entry--shadowed { margin-top: 0 !important; }

  .entry--internal {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    min-width: initial;
  }

  .entry-menu,
  .entry__sender-email,
  .entry__time time { display: none; }

  .entry__participants {
    margin-top: 0;
  }

  .entry:not(.entry--internal) .entry__sender::before {
    content: "from ";
    font-size: var(--font-size-x-small);
    color: var(--color-txt--subtle);
    font-weight: normal;
  }

  .entry__sender,
  .entry__recipients {
    font-size: var(--font-size-x-small);
    color: var(--color-txt--subtle);
    font-weight: normal;
  }

  .entry__content {
    margin-right: 0;

    @media (min-width: 40em) { font-size: var(--font-size-small); }
  }

  .entry-expander {
    --padding-bottom: 3rem;
  }

  .entry-expander__button {
    justify-content: center;

    .btn { font-size: var(--font-size-xx-small) !important; }
  }

  .pagination-link { align-self: center; }
}

.entry__btn-for-shadowed { display: none !important; }

.collection-entries__date {
  @media (max-width: 39.95em) {
    margin: 0 0 0.75em;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 3.5rem;
      right: 3.5rem;
      top: 50%;
      transform: translateY(-50%);
      height: 2px;
      background: var(--color-tertiary);
    }

    &:first-child::before { right: 50%; }
  }

  @media (min-width: 40em) {
    &:first-child { margin-top: 1em; }
  }
}

.collection-entries__date-blob {
  display: inline-block;
  padding: 0.2em 1em;
  position: relative;
  background: var(--color-tertiary);
  color: var(--color-txt--reversed);
  border-radius: 2rem;
}