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

/*

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

*/

.btn {
  @apply cursor-pointer;
}

.btn.btn-primary {
  @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none;
}

.btn.btn-secondary {
  @apply py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100;
}

.link {
  @apply font-medium hover:underline;
}

.link.link-primary {
  @apply text-blue-600;
}

.link-link-danger {
  @apply text-red-600;
}

.label {
  @apply block mb-2 text-sm font-medium text-gray-900;
}

.input {
  @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5;
}

.checkbox-label {
  @apply ms-2 text-sm font-medium text-gray-900 select-none;
}

.checkbox-input {
  @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2;
}