:root {
  --body-bg: rgb(24, 26, 27);
  --body-bg-lighter: rgb(77, 77, 77);
  --main-bg: #f6f6f6;
  --fg: rgb(200, 195, 188);
  --fg-light: #aaa;
  --border-color: rgb(255 255 255 / 10%);
  --panel-header-height: 50px;
  --theme-color: #f60;
}

body {
  @apply bg-body-bg;
  @apply text-fg;
}

.input,
.textarea {
  @apply border-1;
  @apply border-border;
  @apply rounded;
  @apply px-3;
  @apply h-12;
  @apply transition;
  @apply inline-flex;
  @apply bg-transparent;
  @apply focus:outline-none;
  @apply focus:ring-1;
  @apply focus:ring-orange-600;
  @apply focus:border-orange-500;
}

.textarea {
  @apply h-auto;
  @apply py-3;
  @apply resize-none;
}

.button {
  @apply bg-orange-500;
  @apply text-white;
  @apply rounded-md;
  @apply px-3;
  @apply h-10;
  @apply inline-flex;
  @apply items-center;
  @apply justify-center;
  @apply border-1;
  @apply border-orange-500;

  @apply focus:ring-2;
  @apply focus:ring-orange-700;
  @apply focus:outline-none;
}

.button:disabled {
  @apply opacity-75;
  @apply cursor-default;
}

.button.is-small {
  @apply h-8;
  @apply text-xs;
  @apply px-3;
}

.button.is-secondary {
  @apply border-border;
  @apply bg-border;
  @apply focus:ring-gray-500;
}

.select-node__control {
  @apply rounded-md !important;
  @apply h-12 !important;
  @apply border-border !important;
}
