@import "tailwindcss";

@variant dark (@media (prefers-color-scheme: dark));

@theme {
  --font-*: initial;
  --font-sans:
    Geist Sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono:
    Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-separator: var(--separator);
  --color-underline: var(--underline);
  --color-highlight: var(--highlight);
  --color-pre-background: var(--pre-background);
}

:root {
  --background: var(--color-neutral-50);
  --foreground: var(--color-neutral-950);
  --muted: var(--color-neutral-200);
  --muted-foreground: var(--color-neutral-500);
  --separator: var(--color-neutral-200);
  --underline: var(--color-neutral-300);
  --highlight: var(--color-amber-200);
  --pre-background: var(--color-neutral-100);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-50);
    --muted: var(--color-neutral-800);
    --muted-foreground: var(--color-neutral-400);
    --separator: var(--color-neutral-800);
    --underline: var(--color-neutral-600);
    --highlight: var(--color-neutral-700);
    --pre-background: var(--color-neutral-900);
  }

  .astro-code,
  .astro-code span {
    color: var(--shiki-dark) !important;
  }
}

@layer base {
  html {
    height: 100%;
    background-color: var(--color-background);
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: calc(var(--spacing) * 32);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  pre {
    --pre-background-color: var(--color-pre-background);
    padding-block: calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: 1.8;
    background-color: var(--pre-background-color) !important;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-separator);
  }

  pre code {
    isolation: isolate;
    display: block;
    width: fit-content;
    min-width: 100%;
    counter-reset: line;

    & .line {
      --line-background-color: var(--pre-background-color);
      --line-border-color: var(--line-background-color);
      display: inline-block;
      width: 100%;
      counter-increment: line;
      background-color: var(--line-background-color);

      &::before {
        pointer-events: none;
        position: sticky;
        left: 0;
        z-index: 20;
        display: inline-block;
        width: 2.75rem;
        background: linear-gradient(
          to right,
          var(--line-background-color) 80%,
          transparent
        );
        padding-right: 1rem;
        text-align: right;
        color: var(--color-muted-foreground);
        content: counter(line);
        user-select: none;
        border-left: 2px solid var(--line-border-color);
      }

      &::after {
        pointer-events: none;
        position: sticky;
        right: 0;
        z-index: 10;
        display: inline-block;
        width: 1.5rem;
        background: linear-gradient(
          to left,
          var(--line-background-color) 35%,
          transparent
        );
        content: " ";
        user-select: none;
      }

      &.highlighted {
        --line-border-color: var(--color-blue-600);
        --line-background-color: color-mix(
          in oklab,
          var(--line-border-color),
          var(--pre-background-color) 90%
        );

        @media (prefers-color-scheme: dark) {
          --line-border-color: var(--color-blue-400);
        }

        &::before {
          color: var(--line-border-color);
        }
      }

      &.remove {
        --line-border-color: var(--color-red-600);
        --line-background-color: color-mix(
          in oklab,
          var(--line-border-color),
          var(--pre-background-color) 90%
        );

        @media (prefers-color-scheme: dark) {
          --line-border-color: var(--color-red-400);
        }

        &::before {
          content: "-";
          color: var(--line-border-color);
        }
      }

      &.add {
        --line-border-color: var(--color-green-600);
        --line-background-color: color-mix(
          in oklab,
          var(--line-border-color),
          var(--pre-background-color) 90%
        );

        @media (prefers-color-scheme: dark) {
          --line-border-color: var(--color-green-400);
        }

        &::before {
          content: "+";
          color: var(--line-border-color);
        }
      }
    }
  }

  code {
    font-size: var(--text-sm);
  }
}

@layer components {
  .prose {
    & > :where(* + *) {
      margin-top: calc(var(--spacing) * 4);
    }

    /* & > :where(* + pre),
    & > :where(pre + *),
    & > :where(* + iframe),
    & > :where(iframe + *) {
      margin-top: calc(var(--spacing) * 6);
    } */

    & :where(h1, h2, h3) {
      font-weight: var(--font-weight-medium);
    }

    & > :where(ul) {
      list-style-type: disc;
      padding-inline-start: calc(var(--spacing) * 6);

      & :where(li:has(br)) {
        color: var(--color-muted-foreground);

        &::first-line {
          color: var(--color-foreground);
        }
      }
    }

    & > :where(ul) > li + li {
      margin-top: var(--spacing);
    }

    & :where(a) {
      text-decoration: underline;
      text-decoration-color: var(--color-underline);
      text-decoration-thickness: 0.09375rem;
    }

    & :where(blockquote) {
      --border-color: var(--color-green-600);
      padding-left: calc(var(--spacing) * 4);
      border-left: 2px solid var(--border-color);
      @media (prefers-color-scheme: dark) {
        --border-color: var(--color-green-400);
      }
    }

    & :where(mark) {
      color: var(--color-foreground);
      background-color: var(--color-highlight);
      margin-inline: calc(var(--spacing) * -0.5);
      padding-inline: calc(var(--spacing) * 1);
      box-decoration-break: clone;
      border-radius: var(--radius-sm);
      font-weight: var(--font-weight-medium);
    }

    & :where(strong) {
      font-weight: var(--font-weight-medium);
    }

    & *::marker {
      color: var(--color-muted-foreground);
    }

    & :where(hr) {
      margin-block: calc(var(--spacing) * 8);
      border-color: var(--color-separator);
    }

    & :where(p:has(> img)) {
      aspect-ratio: 4 / 3;
      overflow: hidden;

      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & :where(dl) {
      display: grid;
      grid-template-columns: 25% 1fr;
      column-gap: calc(var(--spacing) * 8);
      row-gap: calc(var(--spacing) * 4);
    }

    & :where(dt) {
      color: var(--color-muted-foreground);
      font-weight: var(--font-weight-medium);
    }
  }

  .prose-longform {
    & > :where(* + :is(h2, h3)) {
      margin-top: calc(var(--spacing) * 8);
    }

    & > :where(pre) {
      margin-block: calc(var(--spacing) * 8);
    }

    & > :where(:is(h2)) {
      font-size: var(--text-xl);
    }

    & > :where(:not(:is(h2, h3))) {
      color: var(--color-muted-foreground);
    }
  }
}

@layer utilities {
  .container {
    width: 100%;
    margin-inline: auto;
    max-width: var(--container-2xl);
    padding-inline: calc(var(--spacing) * 4);
  }

  .background-angled-lines {
    background-image: linear-gradient(
      45deg,
      var(--color-muted-foreground) 12.5%,
      transparent 12.5%,
      transparent 50%,
      var(--color-muted-foreground) 50%,
      var(--color-muted-foreground) 62.5%,
      transparent 62.5%,
      transparent 100%
    );
    background-size: 0.25rem 0.25rem;
  }

  .background-grid {
    background: conic-gradient(
      from 90deg at 50% 50%,
      transparent 0deg 90deg,
      var(--color-separator) 90deg 180deg,
      transparent 180deg 270deg,
      var(--color-separator) 270deg 360deg
    );
    background-size: 8px 8px;
  }

  .list-square {
    list-style-type: square;
  }
}
