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

.link {
  @apply text-orange-400 hover:brightness-125;
}
a.external {
  @apply link after:content-['_↗'];
}

/* main navbar */
#main-navbar div a {
  @apply py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-transparent text-gray-500 hover:text-gray-800 focus:outline-none dark:text-neutral-400 dark:hover:text-neutral-200;
}
#main-navbar div a.active {
  @apply py-0.5 md:py-3 px-4 md:px-1 border-s-2 md:border-s-0 md:border-b-2 border-orange-400 font-medium text-neutral-200 focus:outline-none;
}

/** home page **/
a.btn-link {
  @apply py-1 px-3 mt-2 inline-flex items-center gap-x-1 text-sm font-medium rounded-lg border border-neutral-700 bg-neutral-800 text-white shadow-sm hover:bg-neutral-700;
}
/* my nodes copy input button */
button.copy-input {
  @apply px-2 shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-transparent bg-orange-600 text-white hover:brightness-125 focus:outline-none focus:bg-orange-700 disabled:opacity-50 disabled:pointer-events-none;
}

/* table */
table.dt {
  @apply min-w-full divide-y divide-neutral-700;
}
table.dt thead {
  @apply bg-neutral-800;
}
table.dt thead tr th {
  @apply px-3 py-3 text-start text-xs font-semibold uppercase text-neutral-200;
}
thead input.th-filter,
thead select.th-filter {
  @apply block w-full text-neutral-400 placeholder-neutral-500 bg-transparent border-t-transparent border-b-2 border-x-transparent border-b-neutral-700 text-sm focus:border-t-transparent focus:border-x-transparent focus:border-b-orange-400 focus:ring-0 focus:ring-orange-400;
}
table.dt tbody {
  @apply divide-y divide-neutral-700;
}
table.dt tbody tr {
  @apply odd:bg-neutral-900 even:bg-neutral-800;
}
table.dt tbody tr th,
table.dt tbody tr td {
  @apply px-3 py-2;
}

/* pagination */
nav.pagination button.active {
  @apply py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-bold rounded-lg border border-orange-500 bg-orange-500 text-white shadow-sm hover:brightness-125 disabled:opacity-90 disabled:pointer-events-none;
}
nav.pagination button {
  @apply py-1.5 px-2 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-neutral-800 border border-neutral-700 text-white shadow-sm hover:brightness-125 disabled:opacity-50 disabled:pointer-events-none;
}