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

@layer components {
  .btn {
    @apply bg-blue-600 text-white py-2 px-3.5 font-semibold text-sm rounded-sm hover:opacity-70;
  }

  .modal {
    @apply px-4 py-3.5 ml-auto mr-auto mt-20 bg-white max-w-md border rounded-sm;
  }
}

[x-cloak] {
  display: none !important;
}

.backdrop {
  @apply fixed top-0 left-0 bottom-0 right-0 bg-[rgba(0,0,0,.15)] px-2.5 overflow-y-auto;
}

a {
  @apply underline text-blue-600;
}

input,
select {
  @apply w-full border py-1 rounded-sm my-0.5 bg-white;
}

input {
  @apply px-1.5;
}

hr {
  @apply my-2;
}

button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}