@import 'tailwindcss';

@theme {
  --text-xxs: 0.625rem;
}

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

button {
  @apply font-bold py-2 px-4 rounded-sm cursor-pointer;
}
.btn-blue {
  @apply bg-[#034DA2] text-white text-xs;
}
.btn-blue:hover {
  @apply bg-blue-700;
}
.btn-gray {
  @apply bg-gray-500 text-white text-xs;
}
.btn-gray:hover {
  @apply bg-gray-700;
}
.btn-white {
  @apply bg-white text-gray-500 border border-gray-500 text-xs;
}
.btn-white:hover {
  @apply bg-gray-100;
}

button:disabled,
button[disabled],
button:disabled:hover {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}
main {
  @apply text-gray-700 dark:text-gray-200;
}

h1 {
  @apply text-2xl font-bold text-gray-700 dark:text-gray-200 mt-2 mb-2;
}
h2 {
  @apply text-2xl font-semibold text-gray-700 dark:text-gray-200;
}

h3 {
  @apply text-xl font-semibold text-gray-700 dark:text-gray-200;
}
th {
  @apply px-2 py-2 dark:text-gray-200;
}
td {
  @apply whitespace-nowrap px-2 py-2 overflow-hidden text-ellipsis dark:text-gray-200;
}

table {
  @apply min-w-full table-fixed w-full;
}

thead {
  @apply border-b border-neutral-200 dark:border-gray-700 text-left;
}
tr {
  @apply border-b border-neutral-200 dark:border-gray-700;
}
tbody tr {
  @apply hover:bg-gray-50 dark:hover:bg-gray-800 h-20;
}

.move-right {
  @apply transition-all duration-300;
}
.move-right:hover {
  @apply pl-1;
}

input[type="text"],
input[type="password"],
input[type="number"] {
  @apply shadow-sm appearance-none border rounded-sm py-2 px-3 text-gray-700 dark:text-gray-200 dark:bg-gray-800 dark:border-gray-700 leading-tight focus:outline-hidden;
}
input[type="checkbox"] {
  @apply w-4 h-4 rounded-sm mt-2;
}

.input-error {
  @apply border-red-500 focus:border-red-500 focus:ring-red-200 focus:ring-2;
}
.input-default {
  @apply border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-blue-200 focus:ring-2;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.link {
  @apply text-blue-500 underline hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300;
}
