@import "tailwindcss";
@import "../styles/highlight-js/github-light.css";
@import "../styles/highlight-js/github-dark.css";

@plugin "tailwindcss-animate";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-berkeley-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);

  --color-surface: var(--surface);
  --color-site-background: var(--site-background);
}

:root {
  --site-background: oklab(0.985 0 0 / 0.25);
  --surface: oklch(1 0 0);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --surface: oklch(0.0725 0 0);
  --site-background: oklch(0.145 0 0);
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  :root {
    * {
      cursor: default;
    }
    
    /* Opt text-based inputs out of "forced" default cursor */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {
      cursor: text;
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  code:not(h1 code, h2 code, h3 code, h4 code, .callout code) {
    @apply not-dark:font-[450];
  }

  /* Credit to shadcn ui monorepo */
  body {
    @apply bg-background text-foreground overscroll-none;
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  html {
    @apply scroll-smooth;
  }

  /* Custom scrollbar styling. Thanks @pranathiperii. */
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .callout {
    @apply rounded-sm !py-4;
    
    .callout-title-icon svg {
      @apply size-4 translate-y-[2px];
    }

    .callout-title-text {
      @apply text-base;
    }

    &[data-callout="tip"] {
      @apply bg-green-500/10;
    }

    &[data-callout="note"] {
      @apply bg-blue-500/10;
    }
    
    &[data-callout="important"] {
      @apply bg-purple-500/10;
    }

    &[data-callout="warning"] {
      @apply bg-orange-500/10;
    }

    &[data-callout="danger"] {
      @apply bg-red-500/10 **:!text-red-700 !border-l-red-700 dark:!border-l-red-500 dark:**:!text-red-500;
    }
  }

  html.dark .shiki,
  html.dark .shiki span {
    color: var(--shiki-dark) !important;
    background-color: transparent !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }

  .shiki {
    overflow: auto;
    position: relative;
    padding: theme(spacing.4);

    code {
      display: block;
      width: max-content;
      min-width: 100%;
    }

    .line {
      width: 100%;
      line-height: 1.5;

      @apply border-l-4 border-transparent;

      &.highlighted,
      &.diff {
        @apply -ml-4 -mr-4 inline-block w-[calc(100%+(theme(spacing.4)+theme(spacing.4)))] pl-4 pr-4;
      }

      &.highlighted {
        @apply border-neutral-500 bg-neutral-800;
      }

      &.diff {
        &.add,
        &.remove {
          span:first-child::before {
            @apply -ml-4 inline-flex w-4;
          }
        }

        & > span {
          background: transparent !important;
        }

        &.add {
          @apply border-green-500 !bg-green-500/10;

          span:first-child::before {
            @apply text-green-500 translate-x-0.5 content-["+"];
          }
        }

        &.remove {
          @apply border-red-500 !bg-red-500/10;

          span:first-child::before {
            @apply text-red-500 translate-x-0.5 content-["-"];
          }
        }
      }
    }
  }
}

@layer base {
  html.light {
    code[data-theme],
    code[data-theme] span {
      color: var(--shiki-light);
      background-color: var(--shiki-light-bg);
    }

  }


  html.dark {
    code[data-theme]:not([data-highlighted-line]),
    code[data-theme]:not([data-highlighted-line]) span {
      color: var(--shiki-dark);
      background-color: var(--shiki-dark-bg);
    }
  }

  figure[data-rehype-pretty-code-figure] {
    @apply my-6 relative;

    figcaption[data-rehype-pretty-code-title] {
      @apply relative text-xs text-muted-foreground font-mono w-fit border-x border-t border-border rounded-t-md px-4 py-1.5 translate-y-[1px] select-none;
      @apply bg-white dark:bg-black;

      & + pre {
        @apply rounded-tl-none;
      }
    }
    
    figcaption[data-rehype-pretty-code-caption] {
      @apply text-sm text-muted-foreground text-center mt-3;
    }

    & > pre {
      @apply bg-white dark:bg-black;
      @apply max-h-[650px] overflow-x-auto rounded-xl border border-border;
      @apply py-4;

      [data-line] {
        @apply px-6 py-0.5;
      }

      & > code {
        @apply grid min-w-full break-words rounded-none border-0 bg-transparent !p-0;
        @apply !bg-white dark:!bg-black text-sm;
      }

      [data-highlighted-line] {
        @apply !bg-neutral-100 dark:!bg-neutral-900;

        &::before {
          @apply border-l-3 border-neutral-400 dark:border-neutral-500;
          position: absolute;
          margin-left: calc(var(--spacing) * -6);
          margin-top: calc(var(--spacing) * -0.5);
          height: calc(var(--spacing) * 6);
          content: '';
        }
      }

      [data-line].diff ~ [data-highlighted-line]::before,
      [data-highlighted-line] ~ [data-line].diff + [data-highlighted-line]::before {
        margin-left: calc(var(--spacing) * -8);
      }

      :has([data-line].diff) [data-line] {
        padding-left: calc(var(--spacing) * 8);
      }

      [data-line].diff.add {
        @apply bg-green-500/15;

        &::before {
          @apply border-l-3 border-green-500;
          position: absolute;
          margin-left: calc(var(--spacing) * -8);
          margin-top: calc(var(--spacing) * -0.5);
          height: calc(var(--spacing) * 6);
          content: '';
        }

        &:after {
          position: absolute;
          left: calc(var(--spacing) * 2.5);
          color: var(--color-green-500);
          font-size: var(--text-base);
          line-height: 1.3;
          content: '+';
        }
      }

      [data-line].diff.remove {
        @apply bg-red-500/15;
        
        span {
          @apply opacity-60;
        }

        &::before {
          @apply border-l-3 border-red-500;
          position: absolute;
          margin-left: calc(var(--spacing) * -8);
          margin-top: calc(var(--spacing) * -0.5);
          height: calc(var(--spacing) * 6);
          content: '';
        }

        &:after {
          position: absolute;
          left: calc(var(--spacing) * 2.5);
          color: var(--color-red-500);
          font-size: var(--text-base);
          line-height: 1.3;
          content: '-';
        }
      }

      code[data-line-numbers] {
        counter-reset: line;
      }

      code[data-line-numbers] > [data-line]::before {
        counter-increment: line;
        content: counter(line);

        display: inline-block;
        width: 0.75rem;
        margin-right: 2rem;
        text-align: right;
        @apply text-xs text-muted-foreground/50 tracking-tight;
      }

      code[data-line-numbers-max-digits="2"] > [data-line]::before {
        /*width: 1rem;*/
        width: calc(var(--spacing) * 4);
      }

      code[data-line-numbers-max-digits="3"] > [data-line]::before {
        width: 1.25rem;
      }

      code[data-line-numbers-max-digits="4"] > [data-line]::before {
        width: 1.75rem;
      }
    }
  }
}

@layer utilities {
  .border-grid {
    @apply border-border/50 dark:border-border border-dashed;
  }

  .container-wrapper {
    @apply max-w-[1400px] min-[1800px]:max-w-screen-2xl min-[1400px]:border-x border-border/70 dark:border-border mx-auto w-full border-dashed;
  }

  .container {
    @apply px-4 xl:px-6 mx-auto max-w-screen-2xl;
  }

  /* Hide scrollbar for Chrome, Safari and Opera */
  .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 */
  }
}

@utility max-w-screen-* {
  max-width: --value(--breakpoint- *);
}
