fizzy/app/assets/stylesheets/trays.css

:root {
  --tray-size: max(20dvw, 18rem);
}

@layer components {
  .tray {
    /* FIXME: Magic number */
    --tray-item-height: calc(2.625lh + var(--block-space));
    --tray-item-height: 76px;
    --tray-bottom-padding: var(--block-space-half);

    background-color: transparent;
    block-size: var(--footer-height);
    border: 0;
    display: flex;
    flex-direction: column;
    inline-size: var(--tray-size);
    inset-block: auto 0;
    justify-content: center;
    padding: 0;
    position: fixed;
    z-index: var(--z-tray);

    .tray__item {
      --tray-item-offset: var(--block-space);
      --tray-item-y: calc((var(--tray-item-index) - 1) * (var(--tray-item-offset) * -1) - var(--tray-bottom-padding));
      --tray-item-index: 1;
      --tray-item-scale: calc(1 - var(--tray-item-index) / 30);
      --tray-item-z: calc(6 - var(--tray-item-index));

      display: flex;
      font-size: 10px;
      inline-size: var(--tray-size);
      inset: auto 0 0;
      outline: 0;
      pointer-events: none;
      position: absolute; /* tmp fix; ideally should remove the position-relative class from tray__item */
      scale: var(--tray-item-scale);
      transform: translateY(var(--tray-item-y));
      transform-origin: center;
      transition: scale 0.2s ease-out, transform 0.2s ease-out;
      z-index: var(--tray-item-z);
      container-type: inline-size;

      &: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; }

      .tray[open] & {
        --tray-item-y: calc(-100% * var(--tray-item-index) + var(--tray-item-height) - var(--footer-height));
        --tray-item-scale: 1;

        /* FIXME: Space below the list when open */
        /* margin-block-end: calc(var(--block-space) * -1); */
        pointer-events: unset;
      }

      .tray:has(.tray__item:only-child) & {
        pointer-events: unset;
      }
    }
  }

  .tray__actions {
    --hover-size: 0;

    align-items: center;
    border: 1px dashed color-mix(in srgb, var(--color-white) 40%, var(--color-ink));
    color: var(--color-ink-inverted);
    display: flex;
    gap: var(--inline-space-half);
    justify-content: space-between;
    opacity: 0;
    scale: calc(1 - 1 / 30);
    transform: translateY(100%);
    transition: opacity 0.2s ease-out, scale 0.2s ease-out, transform 0.2s ease-out;

    .tray[open] & {
      opacity: 1;
      scale: 1;
      transform: translateY(0);
    }

    .tray:not(:has(.tray__item)) & {
      opacity: 1;
      scale: 1;
      transform: none;
      transition: none;
    }

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

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

    background-color: transparent;
    block-size: var(--tray-item-height);
    border: 0;
    cursor: pointer;
    inset: auto 0 0 0;
    padding: 0;
    position: absolute;
    z-index: 6;

    .tray[open] &,
    .tray:not(:has(.tray__item)) &,
    .tray:has(.tray__item:only-child) & {
      display: none;
    }
  }

  .tray__overflow {
    --hover-size: 0;
    --tray-item-index: 7;
    --tray-item-scale: calc(1 - var(--tray-item-index) / 30);
    --tray-item-y: calc((var(--tray-item-index) - 1) * (var(--tray-item-offset) * -1) - var(--tray-bottom-padding));
    --tray-item-z: calc(6 - var(--tray-item-index));

    background-color: var(--color-canvas);
    block-size: var(--tray-item-height);
    border-radius: 0.2em;
    box-shadow: var(--shadow);
    color: var(--color-ink);
    display: none;
    font-size: var(--text-small);
    font-weight: bold;
    inline-size: var(--tray-size);
    inset: auto 0 0;
    opacity: 0;
    place-content: center;
    pointer-events: none;
    position: absolute;
    scale: var(--tray-item-scale);
    transform: translateY(var(--tray-item-y));
    transform-origin: center;
    transition:
      opacity 0.2s ease-out,
      scale 0.2s ease-out,
      transform 0.2s ease-out;
    z-index: var(--tray-item-z);

    .tray:has(.tray__item:nth-child(7)) & {
      display: grid;
    }

    .tray[open] & {
      --tray-item-y: calc(-100% * var(--tray-item-index) + var(--tray-bottom-padding));
      --tray-item-scale: 1;

      opacity: 1;
      pointer-events: unset;
    }
  }

  /* 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;
    }

    .card__collection {
      padding-block: 0.25ch;
    }

    .card__body {
      padding-block-end: 0;
    }

    .card__title {
      --lines: 1;

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

  /* Pins tray
  /* ------------------------------------------------------------------------ */

  .tray--pins {
    /* inset: auto auto var(--block-space-half) var(--inline-space); */
    inset-inline: var(--inline-space) auto;

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

      &: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; }
      &:nth-child(1n + 11) { display: none; }
    }

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

    .card__body {
      display: block;
    }

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

    .card__link {
      z-index: 1;
    }

    .card__stages {
      padding: 0;
    }

    .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 {
      background: none;
      border: 1px solid currentColor;
      color: var(--color-ink);
      inline-size: fit-content;
      inset: 0 0 auto auto;
      position: absolute;
    }

    .card__bubble {
      display: none;
    }
  }

  /* Notifications tray
  /* ------------------------------------------------------------------------ */

  .tray--notifications {
    /* inset: auto var(--inline-space) var(--block-space-half) auto; */
    inset-inline: auto var(--inline-space);

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

    &:not(:has(.notification)) {
      .tray__notification-read_action {
        visibility: hidden;
      }
    }

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

    .card__notification-meta {
      font-size: var(--text-x-small);
    }
  }
}