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

@import url("../styles/syntax.css");
@import url("../styles/editor.css");

/* ocean */
@layer base {
  :root {
    --background: 210 50% 95%;
    --foreground: 220 20% 15%;
    --card: 210 40% 98%;
    --card-foreground: 220 20% 15%;
    --popover: 210 40% 98%;
    --popover-foreground: 220 20% 15%;
    --primary: 132 86% 42%;
    --primary-foreground: 210 50% 95%;
    --secondary: 220 30% 85%;
    --secondary-foreground: 220 20% 15%;
    --muted: 220 30% 85%;
    --muted-foreground: 220 20% 40%;
    --accent: 132 86% 32%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 65% 55%;
    --destructive-foreground: 220 20% 95%;
    --border: 220 15% 90%;
    --input: 220 15% 90%;
    --ring: 132 86% 42%;
    --radius: 0.5rem;
    --chart-1: 210 60% 50%;
    --chart-2: 220 40% 65%;
    --chart-3: 132 86% 42%;
    --chart-4: 200 60% 55%;
    --chart-5: 240 30% 40%;
  }

  .dark {
    --background: 220 20% 10%;
    --foreground: 220 80% 90%;
    --card: 220 20% 12%;
    --card-foreground: 220 80% 90%;
    --popover: 220 20% 12%;
    --popover-foreground: 220 80% 90%;
    --primary: 132 86% 42%;
    --primary-foreground: 220 20% 10%;
    --secondary: 220 30% 15%;
    --secondary-foreground: 220 80% 90%;
    --muted: 220 30% 15%;
    --muted-foreground: 210 20% 85%;
    --accent: 132 86% 32%;
    --accent-foreground: 220 80% 90%;
    --destructive: 0 65% 55%;
    --destructive-foreground: 220 80% 90%;
    --border: 220 30% 15%;
    --input: 220 30% 15%;
    --ring: 132 86% 42%;
    --chart-1: 210 60% 50%;
    --chart-2: 220 40% 65%;
    --chart-3: 132 86% 42%;
    --chart-4: 200 60% 55%;
    --chart-5: 240 30% 40%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.prose {
  margin: 0 !important;
}

pre {
  padding: 2px 0 !important;
  width: inherit !important;
  overflow-x: auto;
}

pre>code {
  display: grid;
  max-width: inherit !important;
  padding: 14px 0 !important;
}

.code-line {
  padding: 0.75px 16px;
  @apply border-l-2 border-transparent
}

.line-number::before {
  display: inline-block;
  width: 1rem;
  margin-right: 22px;
  margin-left: -2px;
  color: rgb(110, 110, 110);
  content: attr(line);
  font-size: 13.5px;
  text-align: right;
}

.highlight-line {
  @apply bg-primary/5 border-l-2 border-primary/30;
}

.rehype-code-title {
  @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
}

.highlight-comp>code {
  background-color: transparent !important;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@layer utilities {
    .animate-shine {
      --animate-shine: shine var(--duration) infinite linear;
      animation: var(--animate-shine);
      background-size: 200% 200%;
    }

    @keyframes shine {
      0% {
        background-position: 0% 0%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 0%;
      }
    }
  }