@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://use.typekit.net/mpa1wkh.css");
html,
body {
  font-family: "Inter", "acumin-pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
    "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
}

@import "./addons/loader.css";
@import "./addons/apexcharts.css";
@import "./addons/tooltip.css";

@import "./utilities.css";
@import "./datatable.css";
@import "./resizer.css";
@import "./card.css";
@import "./animations.css";
@import "./text.css";

@layer base {
  .order-input::-webkit-inner-spin-button,
  .order-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .component-selected {
    @apply relative;
  }
  .component-selected::after {
    content: " ";
    @apply border-info-500 border border-dashed w-full h-full absolute left-0 top-0 pointer-events-none block;
  }
}

.hidden-scrollbar {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.hidden-scrollbar::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}
.ease-animation {
  transition-timing-function: ease-in;
  transition: 0.2s cubic-bezier(0.2, 1, 0.2, 1);
}
.no-transition * {
  transition-property: none !important;
  transition-duration: 0 !important;
}

:root {
  --editor-background-color: #ffffff;
  --editor-text-color: #000000;
  --toolbar-background-color: #f0f0f0;
  --toolbar-border-color: #cccccc;
  --editor-border-color: #dddddd;
}

body.dark-mode {
  --editor-background-color: #333333;
  --editor-text-color: #ffffff;
  --toolbar-background-color: #444444;
  --toolbar-border-color: #555555;
  --editor-border-color: #666666;
}

.quillEditor {
  background-color: var(--editor-background-color);
  color: var(--editor-text-color);
}

.ql-toolbar.ql-snow {
  background-color: var(--toolbar-background-color);
  border: 1px solid var(--toolbar-border-color);
}

.ql-container.ql-snow {
  border: 1px solid var(--editor-border-color);
  color: var(--editor-text-color);
}

.ql-editor {
  min-height: 200px;
}

.ql-editor p {
  color: var(--editor-text-color);
}