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

.status-badge {
  @apply inline-flex px-2.5 py-0.5 rounded-full text-xs font-medium;
}

@layer components {
  .status--pending-planning {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
  }

  .status--planning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
  }

  .status--pending-assembly {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300;
  }

  .status--assembling {
    @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300;
  }

  .status--ready {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
  }

  .status--done {
    @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300;
  }
}

.pagy {
  @apply inline-flex items-stretch -space-x-px;
  a {
    @apply flex items-center justify-center text-sm py-2 px-3 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400;
    &:hover {
      @apply hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-700 dark:hover:text-white;
    }
    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-not-allowed dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400;
    }
    &.current {
      @apply flex items-center justify-center text-sm z-10 py-2 px-3 leading-tight text-primary-600 bg-primary-50 border border-primary-300 hover:bg-primary-100 dark:border-gray-700 dark:bg-gray-700 dark:text-white;
    }
  }

  > *:first-child {
    @apply rounded-l-lg;
  }

  > *:last-child {
    @apply rounded-r-lg;
  }

  /*label {*/
  /*    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;*/
  /*    input {*/
  /*        @apply bg-gray-100 border-none rounded-md;*/
  /*    }*/
  /*}*/
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-primary-200;
  }
}

*/