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

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

/* badge */
.badge {
  @apply inline-flex items-center gap-x-1.5 px-2 rounded-md text-sm font-bold text-white;
}

/* 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-orange-500 bg-orange-600 text-white shadow-sm hover:brightness-125;
}
/* 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;
}

/* forms */
input.frameless,
select.frameless {
  @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 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;
}
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;
}

/* modal */
.modal-container {
  @apply w-full max-h-full overflow-hidden flex flex-col border shadow-sm rounded-xl pointer-events-auto bg-neutral-800 border-neutral-700 shadow-neutral-700/70;
}
.modal-container .modal-header {
  @apply flex justify-between items-center py-3 px-4 border-b border-neutral-700;
}
.modal-header button.btn-close {
  @apply flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-white hover:bg-neutral-700;
}
.modal-container .modal-body {
  @apply p-4 overflow-y-auto;
}
.modal-container .modal-footer {
  @apply flex justify-end items-center gap-x-2 py-3 px-4 border-t border-neutral-700;
}