@tailwind base;
@tailwind components;
@tailwind utilities;

.animated-shadow-sky {
  @apply shadow-lg;
}

.sky-section {
  @apply divide-y divide-slate-300 overflow-hidden border border-slate-300 bg-slate-100 md:rounded-lg;
}

.section-header {
  @apply px-4 py-3 font-medium text-slate-900;
}

.sky-link {
  @apply text-sky-600 underline decoration-dotted transition-colors hover:text-sky-800;
}

.blue-link {
  @apply text-blue-600 transition-colors hover:text-blue-800 hover:underline;
}

.scroll-shadows {
  background:
    /* Shadow Cover TOP */
    linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top,
    /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%)
      center bottom,
    /* Shadow TOP */
      linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) center
      top,
    /* Shadow BOTTOM */
      linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) center
      bottom;

  background-repeat: no-repeat;
  background-size:
    100% 20px,
    100% 20px,
    100% 10px,
    100% 10px;
  background-attachment: local, local, scroll, scroll;
}

.log-entry-table-header-cell {
  @apply border-b border-slate-200 bg-slate-50 px-2 py-1 text-xs font-medium uppercase tracking-wider text-slate-500;
}

.log-entry-table-row-cell {
  @apply flex items-center border-b border-slate-200 px-2 py-1 text-sm group-hover:bg-slate-50;
}