/* Inbox trays
 * -------------------------------------------------------------------------- */

.trays {
  position: fixed;
  width: 100vw;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 7;
  text-align: center;
  max-width: 100%;
}

.trays__scroller {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  margin: 0 auto;
  max-width: var(--content-width);
  background: var(--color-bg--main);
  [data-color-scheme="dark"] & { background: var(--color-bg--main); }

  .inboxes & {
    background: var(--color-bg--surface-glint-opaque);
    [data-color-scheme="dark"] & { background: var(--color-bg--overlay); }
  }

  .sheet + .trays & {
    background: var(--color-bg--surface-glint-opaque);
    [data-color-scheme="dark"] & { background: var(--color-bg--sheet); }
  }

  @media (min-width: 40em) { justify-content: center; }
}

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

.tray {
  margin: 1.5rem 0;
  text-align: left;

  .posting {
    /* Calculations from @mixin closed-card() */
    --position: 1;
    --z: calc(9 - var(--position));
    --scale: calc(1 - var(--position) / 30);
    --translateY: calc((var(--position) - 1) * -1rem);

    font-size: 0.8em;
    width: 18rem;
    order: 1;
    flex-shrink: 0;
    margin: 0 0.5rem;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.2s ease;
    position: absolute;
    top: 0;
    left: 3rem;
    z-index: 0;
    background: var(--color-bg--main);
    box-shadow: 0 0 10px var(--color-bg--surface);
    transform: scale(var(--scale)) translateY(var(--translateY));
    z-index: var(--z);

    @media (min-width: 40em) { width: 25rem; }

    [data-color-scheme="dark"] & {
      background: var(--color-bg--surface-opaque);
      box-shadow: 0 0 10px var(--color-bg--main);
    }

    &:nth-child(1) { --position: 1; }
    &:nth-child(2) { --position: 2; }
    &:nth-child(3) { --position: 3; }
    &:nth-child(4) { --position: 4; }
    &:nth-child(5) { --position: 5; }
    &:nth-child(6) { --position: 6; }
    &:nth-child(7) { --position: 7; }
    &:nth-child(8) { --position: 8; }

    &:nth-child(n+9) { display: none }
  }

  &[open] .posting:focus-within {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }

  &[open] .posting {
    /* Calculations from @mixin open-card */
    --position: 1;
    --x: calc(var(--position) * -4px);
    --y: calc(var(--position) * -6rem);
    --angle: calc(var(--position) * 1.1deg);

    box-shadow: 0 0 10px var(--color-bg--surface), 0 10px 20px var(--color-bg--surface-opaque);
    transform: rotate(var(--angle)) translate(var(--x), var(--y));

    [data-color-scheme="dark"] & { box-shadow: 0 0 10px var(--color-bg--main), 0 15px 10px var(--color-bg--main); }

    &:nth-child(1) { --position: 1; }
    &:nth-child(2) { --position: 2; }
    &:nth-child(3) { --position: 3; }
    &:nth-child(4) { --position: 4; }
    &:nth-child(5) { --position: 5; }
    &:nth-child(6) { --position: 6; }
    &:nth-child(7) { --position: 7; }
    &:nth-child(8) { --position: 8; }
    &:nth-child(9) { --position: 9; }
  }

  .posting__body {
    padding: 0.75rem;

    @media (min-width: 60em) { padding: 1rem; }

    &:hover { background: none !important; }
  }

  .posting__status::before {
    left: 0.4rem !important;
  }

  .posting__summary:not(.posting__summary--comment),
  .posting__contacts,
  .posting__inbox-pill,
  .posting__time,
  .posting__note {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    white-space: nowrap;
  }

  .posting__avatar { align-self: center; }

  .posting__headline,
  .posting__byline {
    max-width: inherit;
    font-size: var(--font-size-x-small);
  }

  &:not([data-list-size-value="1"]):not([open]) {
    .posting__link { pointer-events: none; }
  }

  .tray-overflow {
    display: none;

    &:nth-child(n+10) {
      /* Calculations from @mixin closed-card() */
      --position: 9;
      --z: calc(9 - var(--position));
      --scale: calc(1 - var(--position) / 30);
      --translateY: calc((var(--position) - 1) * -1rem);

      z-index: var(--z);
      transform: scale(var(--scale)) translateY(var(--translateY));
    }

    &:nth-child(n+10) { display: inherit; }
  }

  &[open] .tray-overflow {
    /* Calculations from @mixin open-card */
    --position: 9;
    --x: calc(var(--position) * -4px);
    --y: calc(var(--position) * -6rem);
    --angle: calc(var(--position) * 1.1deg);

    transform: rotate(var(--angle)) translate(var(--x), var(--y));
  }
}

.tray__link {
  position: absolute;
  top: 0.75rem;
  left: 0;
  order: 0;
  outline: none;
  z-index: 1;
  padding-left: 3rem;

  &::before {
    filter: var(--colorize-subtle);
    width: 2.4rem;
    height: 2.4rem;
    left: 0;
    top: 40%;
    background-size: 100%;
  }

  [open] & {
    &::before { filter: var(--colorize-purple); }
  }

  &:focus .btn {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
  }
}

.tray__postings {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 23rem;
  height: 5.5rem;

  @media (min-width: 40em) { width: 30rem; }
}

.tray-overflow__link {
  display: block;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-secondary);
}

.parked-draft {
  animation: slide-in-from-bottom-no-bounce 0.5s ease-out both;
  font-size: 0.8em;
  flex: 1 0;
  border-radius: 1rem 1rem 0 0;
  padding: 1rem;
  overflow: hidden;
  background: var(--color-bg--main);
  box-shadow: 0 0 10px var(--color-bg--surface);
  margin: 0 var(--sheet-padding);

  [data-color-scheme="dark"] & {
    background: var(--color-bg--surface-opaque);
    box-shadow: 0 0 10px var(--color-bg--main);
  }
}