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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  height: 100vh;
  overflow: hidden;
  background-color: var(--surface-container-high, #f5f7fa);
  color: var(--text);
  /* 会影响 antd dropdown menu dropdown 应该是 tailwind modal 实现, 会让 pointer-events: none; 这里强制 unset */
  pointer-events: unset !important;
  font-family: system-ui, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.Toastify__toast-body {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--text);
}

.Toastify__toast {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 20px !important;
}

.Toastify__toast-container {
  width: fit-content !important;
}

.settings-modal > div:nth-child(2) {
  height: 100%;
}

.variable-row {
  word-break: break-word;
}

.chakra-modal__content-container {
  z-index: 11 !important;
}
