@import "tailwindcss";

@import "tw-animate-css";

@import "./theme.css";

/* PrismJS for code highlighting */
@import "prismjs/themes/prism-tomorrow.css";

/* React Flow styles */
@import "@xyflow/react/dist/style.css";

:root {
    --radius: 0.625rem;
    --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);
    --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);
    --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);

    /* Schema Visualizer Theme Variables */
    --schema-panel-bg: var(--background);
    --schema-code-bg: var(--muted);
    --schema-panel-border: var(--border);
    --schema-stats-bg: var(--muted);
    --visualization-bg: var(--background);
}

@theme inline {
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --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-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);
    --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 {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
    button {
        @apply cursor-pointer;
    }
}

/* View Transition Wave Effect */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    /* Ensure the outgoing view (old theme) is beneath */
    z-index: 0;
}

::view-transition-new(root) {
    /* Ensure the incoming view (new theme) is always on top */
    z-index: 1;
}

@keyframes reveal {
    from {
        /* Use CSS variables for the origin, defaulting to center if not set */
        clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
        opacity: 0.7;
    }
    to {
        /* Use CSS variables for the origin, defaulting to center if not set */
        clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
        opacity: 1;
    }
}

::view-transition-new(root) {
    /* Apply the reveal animation */
    animation: reveal 0.4s ease-in-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.3s ease-out forwards;
}

.border-style {
    @apply before:bg-border relative before:absolute before:top-0 before:-right-5 before:h-full before:w-0 last:before:hidden lg:before:w-px;
}

.label-text {
    @apply font-sans text-[10px] tracking-wider;
}

.word-break {
    @apply break-words;
    word-break: break-word;
}

@layer components {
    .clearfix::after,
    .clearfix::before {
        content: "";
        display: table;
        clear: both;
    }
}

/* Widget tip-tap styles */
@layer components {
    .widget-center {
        @apply my-6 sm:grid;
    }

    :not(.preview *).widget-full {
        @apply my-6 xl:-mr-86 xl:-ml-[299.5px];
    }

    :not(.preview *).widget-align-left {
        @apply my-6 xl:-ml-75;
    }

    :not(.preview *).widget-align-right {
        @apply clear-right hidden pb-4 sm:float-right sm:pl-4 lg:block lg:w-75 xl:-mr-[299.5px] xl:pl-15;
    }

    :not(.preview *).widget-left-col {
        @apply clear-left mt-2 mb-5 w-full sm:float-left sm:w-54 sm:pr-8 md:w-68 xl:-ml-[299.5px] xl:w-75 xl:pr-15;
    }

    .rich-text > :is(h1, h2, h3, h4),
    .rich-text > p,
    .rich-text > ul,
    .rich-text > ol {
        @apply font-serif first:mt-0 last:mb-0;
    }

    .rich-text > :is(h1, h2, h3, h4) {
        @apply text-primary font-medium;
    }

    .rich-text > :is(h1, h2, h3, h4) {
        @apply text-primary font-medium;
    }

    .rich-text > h1 {
        @apply mt-9 mb-7 text-4xl;
    }
    .rich-text > h2 {
        @apply mt-7.5 mb-6 text-3xl;
    }
    .rich-text > h3 {
        @apply mt-5 mb-5 text-2xl;
    }
    .rich-text > h4 {
        @apply mt-3 text-xl;
    }

    .rich-text > p {
        @apply text-client-dark mt-2.5 mb-6 text-lg;
    }

    .rich-text > ul p,
    .rich-text > ol p {
        @apply text-client-dark text-lg;
    }
}

.tip-tap {
    @apply text-client-dark font-serif;

    > :first-child {
        @apply mt-0;
    }

    .timeline {
        > h1,
        > h2,
        > h3,
        > h1 *,
        > h2 *,
        > h3 * {
            @apply font-sans;
        }
    }

    p {
        @apply my-2;
    }

    ul,
    ol {
        @apply my-5 mr-4 pr-0 pl-4;
    }

    ul li p,
    ol li p {
        @apply my-1;
    }

    ol {
        @apply list-decimal;
    }

    ul {
        @apply list-disc;
    }

    h1,
    h2,
    h3,
    h4 {
        @apply leading-tight;
    }

    h1 {
        @apply mt-6 mb-4 text-4xl;
    }

    h2 {
        @apply mt-5 mb-3 text-3xl;
    }

    h3 {
        @apply mt-4 mb-2 text-2xl;
    }

    h4 {
        @apply mt-3 text-xl;
    }

    code {
        @apply rounded px-1 py-0.5 text-sm;
        background-color: var(--color-neutral-100);
        color: var(--color-black);
    }

    pre {
        @apply my-6 rounded-lg px-4 py-3 font-mono text-white;
        background: var(--color-black);
    }

    pre code {
        @apply bg-transparent p-0 text-xs;
    }

    blockquote {
        @apply my-6 border-l-4 pl-4 italic;
        border-color: var(--color-neutral-400);
    }

    hr {
        @apply my-8 border-t;
        border-color: var(--color-neutral-300);
    }

    table {
        @apply w-full border-collapse;
        table-layout: fixed;
    }

    table td,
    table th {
        @apply relative border px-2 py-1 align-top;
        border-color: var(--color-neutral-300);
    }

    table th {
        @apply text-left font-bold;
        background-color: var(--color-neutral-200);
    }

    table td > *,
    table th > * {
        @apply m-0;
    }

    table .selectedCell::after {
        content: "";
        @apply pointer-events-none absolute inset-0;
        background: var(--color-black);
        opacity: 0.2;
    }

    table .column-resize-handle {
        @apply absolute top-0 -right-0.5 w-1;
        bottom: -2px;
        background-color: var(--color-black);
        pointer-events: none;
    }

    &.resize-cursor {
        cursor: col-resize;
    }

    > img {
        @apply max-w-60;
    }

    div.react-renderer {
        @apply max-w-60;
    }

    img.ProseMirror-selectednode {
        @apply outline outline-4 outline-black;
    }

    .iframe-wrapper {
        @apply max-h-60 max-w-60;
    }

    .iframe-wrapper iframe {
        @apply h-full w-full;
    }
}