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

.tiptap p.is-editor-empty:first-child::before {
  color:hsl(var(--muted-foreground));
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}



.tiptap-text {
  display: table;
  height: 100%;
}

.tiptap .ProseMirror {
  display: table;
  height: 100%;
}

.ProseMirror-focused {
  outline: none;
}
.react-flow__node {
  width: max-content; 
}
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 5%;

    --card: 0 0% 100%;
    --card-foreground: 0 0% 5%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 5%;

    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 92.1%;
    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;
    --input-background: 0 0%  97%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 5%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 6%;
    --foreground: 0 0% 98%;

    --card: 0 0% 8%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 16%;
    --muted-foreground: 0 0% 65%;

    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 45.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;
    --input-background: 0 0% 10%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
  .embla__slide:not(.is-snapped) {
    opacity: 0.16;
  }

  .light .handle-custom {
    background: hsla(0, 0%, 5%, 0.2) !important;
    border: 1px solid hsla(0, 0%, 5%, 0.2) !important;
  }
  .light .handle-connectable {
    border: 2px solid rgb(24, 194, 33) !important;
    background: rgb(24, 194, 33) !important;
  }

  .light .handle-right {
    border-right: none !important;
  }

  .light .handle-right::before {
    border-radius: 100%;
    content: "";
    display: block;
    height: 1.3rem;
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translate(0, -50%);
    width: 1.3rem;
  }

  .light .handle-left {
    border-left: none !important;
  }

  .light .handle-left::before {
    border-radius: 100%;
    content: "";
    display: block;
    height: 1.3rem;
    position: absolute;
    top: 50%;
    right: -4px;
    transform: translate(0, -50%);
    width: 1.3rem;
  }

  .dark .handle-custom {
    background: hsla(0, 0%, 98%, 0.2) !important;
    border: 1px solid hsla(0, 0%, 98%, 0.2) !important;
  }

  .dark .handle-connectable {
    border: 2px solid rgb(24, 194, 33) !important;
    background: rgb(24, 194, 33) !important;
  }

  .dark .handle-right {
    border-right: none !important;
  }

  .dark .handle-left {
    border-left: none !important;
  }
  .dark #cc-main {
    color-scheme: dark;

    --cc-bg: #000;
    --cc-primary-color: rgb(239, 244, 246);
    --cc-secondary-color: #b1bdc3;

    --cc-btn-primary-bg: #ffffff;
    --cc-btn-primary-color: #000;
    --cc-btn-primary-hover-bg: #ccd4d8;
    --cc-btn-primary-hover-color: #000;

    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.039);
    --cc-btn-secondary-color: var(--cc-primary-color);
    --cc-btn-secondary-border-color: #252729;
    --cc-btn-secondary-hover-bg: #252729;
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: #252729;

    --cc-cookie-category-block-bg: #101111;
    --cc-cookie-category-block-border: #1d1e1f;
    --cc-cookie-category-block-hover-bg: #151516;
    --cc-cookie-category-block-hover-border: #1d1e1f;
    --cc-cookie-category-expanded-block-hover-bg: #1d1e1f;
    --cc-cookie-category-expanded-block-bg: #101111;
    --cc-toggle-readonly-bg: #2f3132;
    --cc-overlay-bg: rgba(0, 0, 0, 0.9) !important;

    --cc-toggle-on-knob-bg: var(--cc-bg);
    --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg);

    --cc-separator-border-color: #252729;

    --cc-footer-border-color: #212529;
    --cc-footer-bg: #000;
  }
  .dark #cc-main .cm__footer {
    color: var(--cc-secondary-color);
  }

  .dark #cc-main .pm {
    border: 1px solid var(--cc-separator-border-color);
  }
}
body {
  font-family: "Inter Variable", sans-serif;
}
@layer base {
  * {
    @apply border-border m-0 p-0 box-border;
  }
  html,
  body {
    @apply h-full w-full;
  }

  #__next {
    @apply h-full w-full;
  }
  body {
    @apply bg-background text-foreground;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-bold;
  }

  h1 {
    @apply text-4xl;
  }

  h2 {
    @apply text-3xl;
  }

  h3 {
    @apply text-2xl;
  }

  h4 {
    @apply text-xl;
  }

  h5 {
    @apply text-lg;
  }
}
