.link {
  @apply font-medium text-blue-600 hover:underline dark:text-blue-400;
}

.heading {
  @apply text-2xl/8 font-semibold text-foreground sm:text-xl/8;
}

.subheading {
  @apply text-base/7 font-semibold text-foreground sm:text-sm/6;
}

.divider {
  @apply w-full border-t;
}

.code {
  @apply rounded-sm border bg-background px-0.5 text-sm font-medium text-foreground sm:text-[0.8125rem];
}

.table-fade { opacity: 0; transition: opacity 250ms ease-in-out; }

/* show only when there’s more to the right (set by the hscroll_indicator Stimulus controller) */
[data-hscroll="right"] .table-fade { opacity: 1; }

/* hide when no overflow or at the end */
[data-hscroll="none"] .table-fade,
[data-hscroll="end"]  .table-fade { opacity: 0; }

tr:hover .table-mask { opacity: 1; @apply bg-inherit }

/* make sure masks don't eat clicks */
[data-action-cell] .table-mask,
[data-action-cell] .table-mask-row,
[data-action-cell] .table-fade { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .table-fade { transition: none; }
}