@layer components {
  .tray__card {
    align-content: center;
    background-color: var(--color-canvas);
    block-size: var(--tray-item-height);
    border: var(--border);
    border-radius: var(--tray-radius);
    color: var(--color-ink);
    column-gap: var(--inline-space-double);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    line-height: 1.3;
    padding-block: var(--block-space-half);
    padding-inline: var(--inline-space-double) calc(var(--inline-space) * 5);
    text-align: start;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--color-ink-lightest);
      }
    }

    [open] & {
      border: 0;
      border-radius: 0;
    }

    /* The list runs bottom up, so each row but the lowest draws the line under the one above. */
    [open] .tray__item:not(:first-child) > & {
      border-block-end: var(--border);
    }

    [open] [aria-selected] & {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: calc(-1 * var(--focus-ring-size));
    }

    .tray__dialog:not([open]) &:focus-visible {
      outline: 0;
    }
  }

  .tray__card-icon {
    --icon-size: 1.25em;

    align-self: center;
    grid-row: span 2;
  }

  .tray__card-title,
  .tray__card-meta {
    grid-column: 2;
  }

  .tray__card-title {
    font-size: var(--text-small);
    font-weight: bold;
  }

  .tray__card-meta {
    color: var(--color-ink-dark);
    font-size: var(--text-x-small);
  }

  .tray__empty {
    .tray__dialog & {
      background-color: var(--color-canvas);
      margin: var(--block-space-half);
    }

    .tray__dialog:not([open]) &,
    :has(> .tray__item) > & {
      display: none;
    }
  }

  /* With nothing waiting there is nothing to open. */
  .tray--notifications .tray__dialog:not(:has(.tray__item)) ~ .tray__toggle {
    opacity: 0.5;

    &, .tray__toggle-btn {
      pointer-events: none;
    }
  }
}

@layer native {
  [data-platform~=native] {
    --footer-height: 0;

    .hide-on-native {
      display: none;
    }
  }
}