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

.rdt_TableCell{
  font-size: 14px;
}

[data-color-scheme="dark"] {
  color-scheme: dark;
}

[data-color-scheme="light"] {
  color-scheme: light;
}

@layer components {
  .border {
    @apply clr-border rounded
  }

  .dark {
    @apply text-zinc-200 bg-gray-900
  }

  .clr-border {
    @apply border-gray-300 dark:border-gray-400
  }

  .clr-app {
    @apply bg-gray-50 dark:bg-gray-800
  }

  .clr-bg-pop {
    @apply bg-gray-100 dark:bg-gray-600
  }

  .clr-modal {
    @apply bg-gray-300 dark:bg-gray-800
  }

  .clr-nav {
    @apply border-gray-400 dark:border-gray-300 bg-white dark:bg-gray-700
  }

  .clr-footer {
    @apply text-gray-600 bg-white border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300
  }

  .clr-card {
    @apply bg-gray-50 dark:bg-gray-600
  }

  .clr-tab {
    @apply clr-border text-gray-600 dark:text-zinc-200 hover:bg-gray-300 dark:hover:bg-gray-400
  }

  .clr-hover {
    @apply hover:bg-gray-50 hover:text-gray-700 dark:hover:text-white dark:hover:bg-gray-500
  }

  .clr-btn-primary {
    @apply text-white bg-blue-400 hover:bg-blue-600 dark:bg-orange-600 dark:hover:bg-orange-400 disabled:bg-gray-400 dark:disabled:bg-gray-400
  }

  .clr-btn-default {
    @apply text-gray-500 dark:text-zinc-200 dark:disabled:text-zinc-400 disabled:text-gray-400 bg-gray-100 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-400
  }

  /* Transparent button */
  .clr-btn-clear {
    @apply hover:bg-gray-300 dark:hover:bg-gray-400 dark:disabled:text-zinc-400 disabled:text-gray-400 text-gray-500 dark:text-zinc-200
  }

  .clr-checkbox {
    @apply bg-white dark:bg-gray-900 checked:bg-blue-700 dark:checked:bg-orange-500
  }

  .text-red {
    @apply text-red-600 dark:text-red-400
  }

  .text-green {
    @apply text-green-400 dark:text-green-500
  }

  .text-primary {
    @apply text-blue-600 dark:text-orange-400
  }
}