@layer components {
  /* Container
  /* ------------------------------------------------------------------------ */

  .tray {
    --tray-duration: 350ms;
    --tray-margin: 0.5rem;
    --tray-radius: 0.25rem;
    --tray-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1);

    align-items: end;
    block-size: var(--footer-height);
    display: grid;
    inset-block: auto 0;
    inline-size: var(--tray-size);
    position: fixed;
    z-index: var(--z-tray);

    /* Make the dialog, expander, and actions inhabit the same space */
    > * {
      grid-column-start: 1;
      grid-row-start: 1;
    }

    @media (max-width: 799px) {
      &:has(.tray__dialog[open]) {
        background-color: var(--color-terminal-bg);
        inline-size: calc(100% - var(--tray-margin) * 2);
        inset-inline-start: var(--tray-margin);
        z-index: calc(var(--z-tray) + 2);
      }
    }
  }

  /* Dialog
  /* ------------------------------------------------------------------------ */

  .tray__dialog {
    background-color: transparent;
    display: flex;
    flex-direction: column-reverse;
    inline-size: auto;
    inset: auto 0 0 0;
    position: absolute;
    transition: var(--tray-duration) var(--tray-timing-function);
    transition-property: background-color, box-shadow, inset-block-end;

    &[open] {
      border-radius: var(--tray-radius);
      box-shadow:
        0 0 0 1px var(--color-ink-lighter),
        0 0 16px oklch(var(--lch-black) / 33%);
      inset-block-end: var(--footer-height);
    }

    &:not([open]) {
      block-size: var(--footer-height);
      pointer-events: none;
    }
  }

  /* Expander
  /* ------------------------------------------------------------------------ */

  .tray__expander {
    --hover-size: 0;
    --outline-size: 0;

    align-self: stretch;
    background: transparent;
    border: 0;
    display: grid;
    margin-block: calc(var(--block-space) * -1) var(--block-space-half);
    place-content: center;
    z-index: calc(var(--z-tray) + 1);

    .icon {
      color: var(--color-white);
      display: none;
    }

    .tray__dialog[open] ~ & {
      display: none;
    }

    /* On mobile, add an icon to the expander button */
    @media (max-width: 799px) {
      inline-size: var(--footer-height);
      margin: 0;

      .icon {
        display: block;
      }

      /* Show a red dot if there are items to show */
      .tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after {
        background: oklch(var(--lch-red-medium));
        block-size: 1ch;
        border-radius: 50%;
        content: "";
        inline-size: 1ch;
        inset: 25% 25% auto auto;
        position: absolute;
      }
    }

    /* On desktop, hide if there aren't any items to show */
    @media (min-width: 800px) {
      .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
        display: none
      }
    }
  }

  /* Actions
  /* ------------------------------------------------------------------------ */

  .tray__actions {
    --hover-size: 0;

    align-self: center;
    align-items: stretch;
    border: 1px dashed oklch(var(--lch-white) / 50%);
    border-radius: 0.5em;
    color: var(--color-ink-inverted);
    display: flex;
    gap: var(--inline-space-half);
    opacity: 0;
    transition: translate var(--tray-duration) var(--tray-timing-function);
    translate: 0 var(--footer-height);

    /* Get the circle buttons to be full-height without magic numbers */
    form {
      aspect-ratio: 1;

      .btn {
        block-size: 100%;
        inline-size: 100%;
      }
    }

    .btn {
      opacity: 0.66;

      &:hover,
      &:focus-visible {
        opacity: 1;
      }
    }

    .tray__dialog[open] ~ & {
      opacity: 1;
      translate: 0 0;
    }

    /* On desktop, show actions when there aren't items */
    @media (min-width: 800px) {
      .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & {
        opacity: 1;
        translate: 0 0;
      }
    }

    @media (prefers-color-scheme: dark) {
      .btn--reversed {
        color: var(--color-ink);
      }
    }
  }

  /* Item
  /* ------------------------------------------------------------------------ */

  .tray__item {
    --tray-item-delay: calc((var(--tray-item-index) - 1) * 20ms);
    --tray-item-height: 76px; /* FIXME: Magic number */
    --tray-item-index: 1;
    --tray-item-margin: calc(-1 * var(--tray-item-height) + var(--tray-item-offset));
    --tray-item-offset: var(--block-space-half); /* The amount they overlap */
    --tray-item-scale: calc(1 - (var(--tray-item-index) - 1) / 30);
    --tray-item-z: calc(6 - var(--tray-item-index));

    position: relative;

    .tray__dialog & {
      font-size: 10px;
      margin-block-end: var(--tray-item-margin);
      transition: var(--tray-duration) var(--tray-timing-function);
      transition-delay: var(--tray-item-delay);
      transition-property: margin, scale;
      z-index: var(--tray-item-z);

      &:first-child {
        --tray-item-margin: var(--tray-margin);
      }

      &:not(:first-child) {
        scale: var(--tray-item-scale);
      }

      &:nth-child(1) { --tray-item-index: 1; }
      &:nth-child(2) { --tray-item-index: 2; }
      &:nth-child(3) { --tray-item-index: 3; }
      &:nth-child(4) { --tray-item-index: 4; }
      &:nth-child(5) { --tray-item-index: 5; }
      &:nth-child(6) { --tray-item-index: 6; }
      &:nth-child(7) { --tray-item-index: 7; }
      &:nth-child(8) { --tray-item-index: 8; }
      &:nth-child(9) { --tray-item-index: 9; }
      &:nth-child(10) { --tray-item-index: 10; }
    }

    .tray__dialog[open] & {
      --tray-item-margin: 0;
      --tray-item-scale: 1;
    }

    .tray__dialog:not([open]) & {
      @media (max-width: 799px) {
        opacity: 0;
      }
    }

    .bubble {
      display: none;
    }
  }

  .tray__item--overflow {
    --tray-item-index: 7 !important;
    --tray-item-z: 1;

    display: none;
    opacity: 0;

    .card {
      align-items: center;
      background-color: var(--color-canvas);
      font-size: var(--text-small);
      font-weight: bold;
      justify-content: center;
    }

    /* Only show when there are 7+ items */
    .tray__dialog:has(.tray__item:nth-child(7)) & {
      display: flex;
    }

    .tray__dialog[open] & {
      --tray-item-scale: 1;

      opacity: 1;
    }
  }

  /* Tray cards
  /* ------------------------------------------------------------------------ */

  .tray {
    .card {
      --card-padding-block: 1.5ch;
      --card-padding-inline: 1.5ch;
      --text-xx-large: 2em;

      block-size: var(--tray-item-height);
      view-transition-name: unset !important;

      [open] & {
        box-shadow: 0 0 0 1px var(--color-ink-lighter);
        border: 0;
        border-radius: 0;
      }

      @media (prefers-color-scheme: dark) {
        box-shadow: 0 0 0 1px var(--color-ink-lighter);
      }
    }

    .card__background {
      display: none;
    }

    .card__body {
      margin-block-start: -0.3em;
      padding-block-end: 0;
    }

    .card__collection {
      padding-block: 0.25ch;
    }

    .card__title {
      --lines: 1;

      font-size: var(--text-small);
      font-weight: bold;
      min-block-size: 0;
    }
  }

  /* Pin-specific styles
  /* ------------------------------------------------------------------------ */

  .tray--pins {
    inset-inline: var(--tray-margin) auto;

    .tray__item {
      --tray-item-z: calc(10 - var(--tray-item-index));

      &:nth-child(1n + 11) { display: none; }
    }

    .avatar,
    .card__tags,
    .card__meta .btn,
    .card__meta-item:not(.card__meta-item--updated),
    .card__stages,
    .card__closed {
      display: none;
    }

    .card__body {
      display: block;
      margin: 0;
    }

    .card__footer {
      margin-block: -0.2em 2em;
    }

    .card__header {
      margin-block-start: calc(var(--card-padding-block) * -1.1);
      margin-inline: calc(-1 * var(--card-padding-inline));
      max-inline-size: unset;
    }

    .card__meta-grid {
      margin-inline-start: 0;
    }

    .card__link {
      z-index: 1;
    }

    .card__meta-item--updated {
      border: 0;
      font-size: var(--text-x-small);
      opacity: 0.66;
      padding: 0;
      text-transform: none;

      .local-time-value {
        font-weight: normal;
      }
    }

    .workflow-stage--current {
      --btn-padding: 0.1em 0.5em;

      background: none !important;
      border: 1px solid currentColor;
      color: var(--color-ink);
      display: inline-flex;
      flex: 0 1 auto;
      inline-size: fit-content;
      margin: 0 0 0 auto;
    }

    .card__bubble {
      display: none;
    }

    /* On mobile… */
    @media (max-width: 799px) {
      /* …add a border */
      .tray__expander {
        border-inline-end: 1px dashed oklch(var(--lch-white) / 50%);
        translate: calc(-1 * var(--tray-margin)) 0;
      }

      /* …and disable the expander if there aren't items to show */
      .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ .tray__expander {
        pointer-events: none;

        .icon {
          opacity: 0.5;
        }
      }
    }

    /* On desktop, don't expand if there's only one pin */
    @media (min-width: 800px) {
      .tray__dialog:has(.tray__item:only-child) {
        pointer-events: unset;

        ~ .tray__expander {
          display: none;
        }
      }
    }
  }

  /* Notification-specific styles
  /* ------------------------------------------------------------------------ */

  .tray--notifications {
    inset-inline: auto var(--tray-margin);

    .tray__item:nth-child(1n + 7) {
      display: none;
    }

    &:not(:has(.card--notification)) {
      .tray__notification-read-action {
        visibility: hidden;
      }
    }

    .card__notification-unread-indicator {
      --btn-icon-size: 1.25em;
      --btn-size: 2em;
    }

    /* On mobile… */
    @media (max-width: 799px) {
      /* …add a border */
      .tray__expander {
        border-inline-start: 1px dashed oklch(var(--lch-white) / 50%);
        translate: var(--tray-margin) 0;
      }

      /* …and hide the dialog if there aren't items to show */
      .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) {
        display: none;
      }
    }
  }
}