/*
  Copyright (C) 2024-2026 memdmp

  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by Affero, Inc., at version 1.

  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the Affero General Public License for more details.

  You should have received a copy of the Affero General Public License along with this program.  If not, see <https://spdx.org/licenses/AGPL-1.0-only>.
*/
@import 'tailwindcss';

@theme {
  --font-sans: 
    InterVariable, Inter, "Noto Sans",
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  --font-space-grotesk: "Space Grotesk", var(--font-sans), sans-serif;
  --font-bios:
    'Ac437 IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
  --font-grub:
    'Px437 DOS/V re. JPN12', 'Ac437 IBM EGA 8x14', 'Hack', 'Courier New',
    'Courier', 'monospace';
  --font-mono:
    'PxPlus IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
  --font-genericmono:
    'JetBrainsMono NF', 'Jetbrains Mono', 'JetBrains Mono', monospace;
  --color-formatted-table-border: var(--color-neutral-900);
  --color-formatted-table-background: var(--color-neutral-950);
  --color-codeblock-border: var(--color-neutral-900);
  --color-codeblock-background: var(--color-neutral-950);
  --color-accent-primary: var(--color-red-400);
}

@utility afterunderline-* {
  @apply relative;
  &::before {
    content: '';
    background: --value(--color-*);
    @apply absolute top-full left-0 -mt-0.5 h-[0.2rem] w-full transition-all -z-10;
  }
}
@utility afterunderline-hoverstate {
  &::before {
    @apply top-0 left-0 mt-0 h-full w-full;
  }
}

@utility formatted-table {
  @apply relative overflow-x-auto shadow-xs rounded-xl border bg-formatted-table-background border-formatted-table-border;
  table {
    @apply w-full text-sm text-left rtl:text-right bg-formatted-table-background;
    thead {
      @apply text-sm border-b rounded-xl border-formatted-table-border;
    }
    tbody tr {
      @apply not-last:border-b border-formatted-table-border;
    }
    th,td {
      @apply px-6 py-3;
    }
    td > b:first-child:last-child {
      @apply px-6 py-4 font-medium whitespace-nowrap;
    }
  }
}
@utility quicklink {
  @apply text-accent-primary transition-all afterunderline-accent-primary hover:afterunderline-hoverstate active:afterunderline-hoverstate focus:afterunderline-hoverstate hover:text-white active:text-white focus:text-white outline-0;
}

@utility internal-header-active {
  &:not(:is(p)) {
    @apply text-white/95;
  }
  &:is(blockquote) {
    &::before {
      background-color: var(--colour-full);
    }
  }
  &::after {
    @apply -ml-3 bg-gray-200/50;
  }
}
#postmd {
  @apply font-sans;
  a {
    @apply quicklink;
  }
  h1 {
    @apply text-4xl mb-1.5 mt-2;
  }
  h2 {
    @apply my-1.5 text-2xl;
  }
  h3 {
    @apply my-1 text-xl;
  }
  h4 {
    @apply my-1 text-lg;
  }
  h1,h2,h3,h4,h5,h6,p {
    @apply relative text-white/90 hover:text-white;
    &::after {
      content: "";
      @apply absolute top-[20%] left-0 h-[60%] w-0.5 -ml-4 rounded-full transition-all;
    }
    &:is(p)::after {
      @apply bg-gray-200/5;
    }
    &:not(:is(p))::after {
      @apply bg-gray-200/15;
    }
    &:hover::after {
      @apply -ml-3 bg-gray-200/75;
    }
    &:hover ~ p:is(p)::after {
      @apply bg-gray-200/4;
    }
  }
  h1 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover)) {
      @apply internal-header-active;
    }
  }
  h2 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover)) {
      @apply internal-header-active;
    }
  }
  h3 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover)) {
      @apply internal-header-active;
    }
  }
  h4 {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover)) {
      @apply internal-header-active;
    }
  }
  h5,h6,p {
    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover,~h5~*:hover)) {
      @apply internal-header-active;
    }
  }
  p::after {
    @apply h-[90%] top-[5%];
  }
  p {
    @apply my-1;
  }
  code {
    @apply font-genericmono;
  }
  p code {
    @apply bg-codeblock-background -my-1 p-1 rounded-lg;
  }
  pre {
    @apply p-3 -mx-2 overflow-scroll bg-codeblock-background border border-codeblock-border rounded-lg transition-colors max-h-[min(75vh,38rem)];
    code {
      .token {
        @apply text-red-500;
      }
      &,
      .token.builtin,
      .token.interpolation {
        @apply text-[#9CDCFE] selection:bg-[#9CDCFE] selection:text-black;
      }
      .token.operator {
        @apply text-[#d4d4d4] selection:bg-[#d4d4d4] selection:text-black;
      }
      .token.class-name {
        @apply text-[#4ec9b0] selection:bg-[#4ec9b0] selection:text-black;
      }
      .token.number {
        @apply text-[#b5cea8] selection:bg-[#b5cea8] selection:text-black;
      }
      .token.comment {
        @apply text-[#6a9955] selection:bg-[#6a9955] selection:text-black;
      }
      .token.keyword {
        @apply text-[#c586c0] selection:bg-[#c586c0] selection:text-black;
      }
      .token.punctuation {
        @apply text-[white] selection:bg-[white] selection:text-black;
      }
      .token.function {
        @apply text-[#dcdcaa] selection:bg-[#dcdcaa] selection:text-black;
      }
      .token.string {
        @apply text-[#ce9178] selection:bg-[#ce9178] selection:text-black;
      }
      .token.boolean,
      .token.interpolation-punctuation {
        @apply text-[#5293c9] selection:bg-[#5293c9] selection:text-black;
      }
    }
  }
  blockquote:not(.default-blockquote) {
    @apply -ml-1 pl-4 p-2 relative my-1;
    &::before {
      @apply absolute w-1 bg-accent-primary/50 transition-colors left-0 top-[10%] h-[80%];
      content: '';
      --colour-full: var(--color-accent-primary);
    }
    &:hover::before {
      background-color: var(--colour-full);
    }
    p {
      &::after {
        @apply hidden;
      }
    }
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}