@import "tailwindcss";

@import "mocha.css";

.mocha {
    --callout-blend-mode: lighten;
}

@theme {
    /* Remove initial variables we don't need */
    --blur-*: initial;
    --perspective-*: initial;
    --drop-shadow-*: initial;
    --shadow-*: initial;
    --inset-shadow-*: initial;
    --ease-*: initial;
    --animate-*: initial;
    --font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
    --font-serif: "IBM Plex Serif", "ui-serif", "serif";

    /* Flag Colors */
    --color-trans-blue: #5bcffa;
    --color-trans-pink: #f5abb9;
    --color-lesbian-orange1: #d62900;
    --color-lesbian-orange2: #ff790d;
    --color-lesbian-orange3: #ff9b55;
    --color-lesbian-pink1: #d462a6;
    --color-lesbian-pink2: #ef5496;
    --color-lesbian-pink3: #a50062;
}

@layer components {
    [data-editor-file] {
        @apply transition-all rounded-md;
        pointer-events: auto;
    }
    [data-editor-file]:hover {
        @apply transition-all outline-ctp-blue outline-2 outline-offset-4
        bg-ctp-blue/10 pl-1;
    }
}

@utility h-entry {
    a {
        @apply text-ctp-blue underline;
    }

    h2 {
        @apply text-2xl font-sans;
    }

    p {
        @apply mb-6;
    }

    blockquote {
        @apply border-l-2 pl-6 relative border-ctp-overlay0 italic;
        left: -0.5rem;
    }

    div.callout-content > p {
        @apply mb-0;
    }

    h2:has(a.header-anchor) {
        @apply text-3xl text-ctp-mauve relative mb-8;
        left: -1.75rem;
    }

    h3:has(a.header-anchor) {
        @apply text-2xl text-ctp-mauve relative mb-6;
        left: -1.75rem;
    }

    a.header-anchor::before {
        @apply relative mr-1 inline-block;
        font-family: "bootstrap-icons";
        content: "\F40A";
        top: 0.225rem;
    }
}

@utility header-anchor {
    @apply text-ctp-mauve!;
}

/* Disable <detail> folding on non-folding admonitions */
@utility no-fold {
    pointer-events: none;
}

/* Callouts/Admonitions */
@utility callout {
    @apply outline-1 rounded-sm py-2 pl-2 pr-4 outline-solid overflow-hidden;
    outline-color: --alpha(var(--callout-color) / 50%);
    margin: 1em 0;
    mix-blend-mode: var(--callout-blend-mode);
    background-color: --alpha(var(--callout-color) / 15%);

    .callout-title {
        @apply text-lg mb-2 flex gap-2 items-start font-semibold w-full;
        color: rgb(var(--callout-color));

        &::before {
            @apply flex items-center text-xl leading-7 mr-1;
            flex: 0 0 auto;
            font-family: "bootstrap-icons";
            content: var(--callout-icon);
        }

        .no-fold &::after {
            content: "" !important;
        }

        &::after {
            margin-left: auto;
            font-family: "bootstrap-icons";
            background-color: rgb(var(--callout-color));
            content: "\F285";
        }

        [open] &::after {
            margin-left: auto;
            font-family: "bootstrap-icons";
            background-color: rgb(var(--callout-color));
            content: "\F282";
        }
    }

    .callout-content {
        @apply overflow-x-auto pl-2;

        [data-editor-file]:hover {
            @apply relative top-2 mr-2;
        }
    }
    &[data-callout="note"] {
        --callout-color: var(--color-ctp-blue);
        --callout-icon: "\F4CB";
    }

    &[data-callout="todo"] {
        --callout-color: var(--color-ctp-blue);
        --callout-icon: "\F26B";
    }

    &[data-callout="info"] {
        --callout-color: var(--color-ctp-blue-700);
        --callout-icon: "\F431";
    }

    &[data-callout="success"],
    &[data-callout="check"],
    &[data-callout="done"] {
        --callout-color: var(--color-ctp-green);
        --callout-icon: "\F272";
    }

    &[data-callout="warning"],
    &[data-callout="caution"],
    &[data-callout="attention"] {
        --callout-color: var(--color-ctp-yellow);
        --callout-icon: "\F33B";
    }

    &[data-callout="question"] {
        --callout-color: var(--color-ctp-yellow-900);
        --callout-icon: "\F505";
    }

    &[data-callout="danger"],
    &[data-callout="error"] {
        --callout-color: var(--color-ctp-maroon-400);
        --callout-icon: "\F46F";
    }

    &[data-callout="failure"] {
        --callout-color: var(--color-ctp-maroon-800);
        --callout-icon: "\F659";
    }

    &[data-callout="bug"] {
        --callout-color: var(--color-ctp-maroon);
        --callout-icon: "\F1DC";
    }

    &[data-callout="tip"],
    &[data-callout="hint"] {
        --callout-color: var(--color-ctp-teal);
        --callout-icon: "\F7F6";
    }

    &[data-callout="example"] {
        --callout-color: var(--color-ctp-mauve);
        --callout-icon: "\F478";
    }

    &[data-callout="abstract"],
    &[data-callout="summary"],
    &[data-callout="tldr"] {
        --callout-color: var(--color-ctp-sky);
        --callout-icon: "\F727";
    }

    &[data-callout="quote"],
    &[data-callout="cite"] {
        --callout-color: var(--color-ctp-overlay0);
        --callout-icon: "\F6B0";
    }
}

/* Start Footnotes */

@utility fn {
    @apply mb-2;
    p {
        @apply inline;
    }
    [data-editor-file] {
        @apply inline;
    }
}

@utility fn-backref {
    &::before {
        @apply inline-block text-ctp-blue align-bottom;
        content: "\F131";
        font-family: "bootstrap-icons";
    }
}

/* End Footnotes */

/* Start ToC */

@utility toc {
    @apply mt-3 mb-8;
}

@utility toc-l1 {
    @apply border-l-2 border-ctp-overlay0 pl-2 ml-1 text-xl;
}

@utility toc-l2 {
    @apply text-base border-l-2 pl-2 border-ctp-surface2 first-of-type:mt-1 last-of-type:mb-1;
}

/* End ToC */

/* Extra arbitrary styles */
details.callout .callout-title {
    margin: 0;
    cursor: pointer;
}

details.callout > .callout-title > .callout-fold::after {
    content: "\F285";
}

details[open].callout > .callout-title > .callout-fold::after {
    content: "\F282";
}