styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

/*
 * Code editor
 */
.code-editor {
  @apply font-mono text-base md:text-tiny leading-4;
}

/* Since Pre overlays Textarea, these two must be identical */
.code-editor pre,
.code-editor textarea {
  @apply py-1 pl-4 !important;
}

.code-editor.with-numbers pre,
.code-editor.with-numbers textarea {
  @apply pl-10 !important;
}

.code-editor textarea {
  @apply outline-none;
}

.light .code-editor textarea {
  caret-color: #000;
}

.dark .code-editor textarea {
  caret-color: #fff;
}

.code-editor .line-number {
  @apply text-gray-300 dark:text-black-400 absolute left-0 text-right w-8;
}

/*
 * Scroll bars
 */
.pane::-webkit-scrollbar,
.select__menu-list::-webkit-scrollbar {
  @apply w-2 h-2;
}

.pane::-webkit-scrollbar-thumb,
.select__menu-list::-webkit-scrollbar-thumb {
  @apply rounded bg-clip-padding border-2 border-transparent;
}

.pane.pane-light::-webkit-scrollbar-thumb,
.select__menu-list::-webkit-scrollbar-thumb {
  @apply bg-gray-200/50 hover:bg-gray-300/75 dark:bg-black-500/50 dark:hover:bg-black-400/75;
}

.pane.pane-dark::-webkit-scrollbar-thumb {
  @apply bg-gray-700/50 hover:bg-gray-600/75 dark:bg-black-600/50 dark:hover:bg-black-500/75;
}

.pane::-webkit-scrollbar-track,
.select__menu-list::-webkit-scrollbar-track {
  @apply bg-transparent;
}

/*
 * Tooltips
 */
.tooltip {
  @apply bg-gray-800 dark:bg-black-500 shadow-md opacity-100 text-xs text-white font-normal rounded z-50 py-2 px-4 !important;
}

.tooltip.place-top::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top-style: solid;
  border-top-width: 6px;
  @apply left-1/2 opacity-100 -ml-2 -bottom-1.5 !important;
}

.light .tooltip.place-top::after {
  border-top-color: #1f2937;
}

.dark .tooltip.place-top::after {
  border-top-color: #1b1b1b;
}

/*
 * React Select
 */
.select__control {
  min-height: 36px !important;
  @apply shadow-none bg-transparent border-transparent h-8 text-sm !important;
  @apply capitalize;
}

.select__value-container {
  @apply cursor-pointer p-0 pr-1 !important;
}

.select__single-value {
  @apply p-0 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white !important;
}

.select__dropdown-indicator {
  @apply text-gray-200 dark:text-gray-700 p-0 pr-1 !important;
}

.select__control--is-focused .select__dropdown-indicator {
  @apply text-gray-600 dark:text-gray-400 !important;
}

.select__indicator-separator {
  @apply hidden !important;
}

.select__menu {
  min-width: 168px !important;
  @apply rounded border bg-white border-gray-200 dark:bg-black-600 dark:border-black-700 shadow !important;
}

.select__menu-list {
  @apply bg-white dark:bg-black-600 rounded !important;
}

.select__option {
  @apply text-sm py-2 px-3 font-normal text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white cursor-pointer hover:bg-gray-50 dark:hover:bg-black-500 !important;
  @apply capitalize;
}

.select__option--is-selected {
  @apply bg-gray-100 dark:bg-black-500 !important;
}

.select__option--is-focused {
  @apply bg-gray-50 dark:bg-black-600 !important;
}

.select__option--is-disabled {
  @apply text-gray-300 hover:text-gray-300 dark:text-gray-600 dark:hover:text-gray-600 cursor-pointer hover:bg-gray-50 dark:hover:bg-black-500 !important;
}
