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

th {
  @apply p-4 pt-0 pb-3 pl-8 font-medium text-left border-b dark:border-slate-600 text-slate-400 dark:text-slate-200;
}

td {
  @apply p-4 pl-8 border-b border-slate-100 dark:border-slate-700 text-slate-500 dark:text-slate-400;
}

.btn {
  @apply inline-block w-full px-3 py-2 rounded-lg ring-2 hover:font-semibold hover:ring-4 hover:shadow-md;
}

.btn-warning {
  @apply text-white bg-yellow-500 ring-yellow-700;
}

.btn-danger {
  @apply text-white bg-red-600 ring-red-800;
}

.btn-success {
  @apply text-white bg-blue-500 ring-blue-700;
}

.btn-info {
  @apply text-white bg-teal-600 ring-teal-800;
}

.input {
  @apply w-full h-10 px-3 mb-2 text-base text-gray-700 placeholder-gray-600 border rounded-lg ;
}

.select {
  @apply w-full h-10 pl-3 pr-6 text-base placeholder-gray-600 border rounded-lg appearance-none ;
}

/* pagy */

.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block px-3 py-1 text-sm font-semibold text-gray-500 bg-gray-200 rounded-lg shadow-md;
  &:hover{
    @apply bg-gray-300;
  }
  &:active{
    @apply text-white bg-gray-400;
  }
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-200;
  }
  &:active {
    @apply text-gray-400 bg-gray-200;
  }
}

.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply text-white bg-gray-400 cursor-default;
  &:hover {
    @apply text-white bg-gray-400;
  }
  &:active {
    @apply text-white bg-gray-400;
  }
}


.pagy-combo-nav-js {
  @apply flex px-3 py-1 text-sm font-semibold text-gray-500 bg-gray-200 rounded-full shadow-md max-w-max;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  &:hover {
    @apply text-gray-800;
  }
  &:active {
    @apply text-gray-800;
  }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}

/* pagy end */