/* Opt in by component family, so each trial can be removed independently.
   Without JavaScript, the browser keeps its native tap feedback. */
@media (hover: none) and (pointer: coarse) {
  body[data-tap-feedback-ready] :where(a, button, summary) {
    /* A control must not inherit another control's opt-in. */
    --tap-feedback: none;
  }

  body[data-tap-feedback-ready] :is(.primary-navigation__item, .context-menu__trigger) {
    --tap-feedback: glow;
    -webkit-tap-highlight-color: transparent;
  }

  /* Menu entries and disclosures. Ordinary buttons keep their own feedback. */
  body[data-tap-feedback-ready] :is(
    .context-menu__context--action,
    .context-menu__setting--action,
    .context-menu__logout-button,
    .settings-tabs__tab,
    .settings-tabs__summary,
    a.settings-tabs__option,
    .record-action-menu__trigger,
    .record-action-menu__action,
    .settings-dialog__action,
    .sickness-overview__summary
  ) {
    --tap-feedback: link;
    -webkit-tap-highlight-color: transparent;
  }

  /* People and profile links. */
  body[data-tap-feedback-ready] :is(.person-card__link, .personal-profile) {
    --tap-feedback: surface;
    -webkit-tap-highlight-color: transparent;
  }

  /* Text links and initiative cards. Filter chips and vacation pills stay as-is. */
  body[data-tap-feedback-ready] :is(
    .breadcrumbs a,
    .community-contact a,
    .profile-card__name a,
    .pickup-child__missing a,
    .pickup-person__missing a,
    .child-card__missing-pickup a,
    .notice-box__actions a:not(.button),
    a.record-action-menu__meta--contact,
    .initiative-list__link
  ) {
    --tap-feedback: link;
    -webkit-tap-highlight-color: transparent;
  }

  /* These ordinary mail links already use the browser's blue link color. */
  body[data-tap-feedback-ready] .settings-record-card__administrator a {
    --tap-feedback: underline;
    -webkit-tap-highlight-color: transparent;
  }

  [data-tap-feedback-pressed="glow"] {
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 65%, transparent);
    box-shadow: 0 0 0.75rem color-mix(in srgb, var(--color-surface) 60%, transparent);
  }

  body[data-tap-feedback-ready] [data-tap-feedback-pressed="link"],
  body[data-tap-feedback-ready] [data-tap-feedback-pressed="link"] :is(span, .icon) {
    color: var(--color-action-primary);
  }

  body[data-tap-feedback-ready] [data-tap-feedback-pressed="underline"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  /* Shade the full person card, including cards with a separate action menu.
     Avatars, text and existing status borders retain their own appearance. */
  body[data-tap-feedback-ready] :is(
    .people-card[data-tap-feedback-pressed="surface"],
    .people-card:has(.person-card__link[data-tap-feedback-pressed="surface"]),
    .personal-profile[data-tap-feedback-pressed="surface"]
  ) {
    background-image: linear-gradient(rgb(0 0 0 / 8%), rgb(0 0 0 / 8%));
  }

  .personal-profile[data-tap-feedback-pressed="surface"] {
    border-radius: var(--radius-lg);
  }
}