.app-icon {
  width: 96px;
  height: 96px;
  transition: background-color .15s ease;
}

a[href]:not([aria-disabled="true"]):has(> .app-icon) {
  transition: transform .15s ease;
}

@media (hover: hover) and (pointer: fine) {
  a[href]:not([aria-disabled="true"]):has(> .app-icon):hover {
    transform: translateY(-4px);
  }
  a[href]:not([aria-disabled="true"]):hover > .app-icon {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff) !important;
  }
}

a[href]:not([aria-disabled="true"]):has(> .app-icon):focus-visible {
  transform: translateY(-4px);
}

a[href]:not([aria-disabled="true"]):focus-visible > .app-icon {
  background-color: var(--bs-primary-bg-subtle, #cfe2ff) !important;
}

@media (prefers-reduced-motion: reduce) {
  .app-icon,
  a[href]:not([aria-disabled="true"]):has(> .app-icon) {
    transition: none;
  }
}