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

.rdt_TableCell{
  font-size: 0.875rem;
}

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

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

.react-dropdown-select-item {
  @apply bg-gray-100 dark:bg-gray-600 dark:text-zinc-200 hover:bg-gray-50 hover:text-gray-700 dark:hover:text-white dark:hover:bg-gray-500
}

.cm-editor {
  @apply border shadow rounded clr-border px-1
}
.cm-editor.cm-focused {
  @apply border shadow rounded outline-2 outline
}

@layer components {
  :root {
    @apply bg-gray-50
  }

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

  h1 {
    @apply text-lg font-bold text-center
  }

  .border {
    @apply clr-border rounded
  }

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

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

  .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-900
  }

  .clr-input {
    @apply dark:bg-[#070b12] bg-white disabled:bg-[#f0f2f7] dark:disabled:bg-gray-700
  }

  .clr-footer {
    @apply clr-app text-gray-600 border-gray-400 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-200 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-600
  }

  .clr-btn-green {
    @apply text-white bg-green-400 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-400 dark:text-black disabled:bg-gray-400 dark:disabled:bg-gray-600
  }

  .clr-btn-blue {
    @apply text-white bg-blue-400 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-400 dark:text-black disabled:bg-gray-400 dark:disabled:bg-gray-600
  }
  .clr-btn-default {
    @apply text-gray-600 dark:text-zinc-200 dark:disabled:text-zinc-400 disabled:text-gray-400 bg-[#f0f2f7] hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-400
  }

  /* Transparent button */
  .clr-btn-clear {
    @apply 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-url {
    @apply hover:text-blue-600 text-blue-400 dark:text-orange-600 dark:hover:text-orange-400
  }

  .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
  }
}