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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

.PopoverContent {
  width: var(--radix-popover-trigger-width);
  max-height: var(--radix-popover-content-available-height);
}

.checkbox__check {
  animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 0.5;
    transform: scale(2.5);
  }

  75% {
    opacity: 0.8;
    transform: scale(2.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-theme="dark"] {
  background-color: hsl(var(--background)) !important;
}

.ProseMirror {
  @apply bg-transparent;
}

.ProseMirror h1 {
  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
}

.ProseMirror h2 {
  @apply scroll-m-20 text-xl font-semibold tracking-tight;
}

.ProseMirror h3 {
  @apply scroll-m-20 text-lg font-semibold tracking-tight;
}

.ProseMirror p {
  @apply leading-7 [&:not(:first-child)]:mt-2;
}

.ProseMirror ul {
  @apply my-6 ml-6 list-disc [&>li]:mt-2;
}

.dark .ProseMirror-focused {
  @apply border border-slate-100 outline-none;
}

.dark .ProseMirror-focused {
  @apply border border-slate-950 outline-none;
}

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

.task-list-item {
  animation: slideIn 0.35s ease-in;
  will-change: transform opacity;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
