@import "tailwindcss";

.latte {
    --ctp-rosewater: rgb(220 138 120);
    --ctp-flamingo: rgb(221 120 120);
    --ctp-pink: rgb(234 118 203);
    --ctp-mauve: rgb(136 57 239);
    --ctp-red: rgb(210 15 57);
    --ctp-maroon: rgb(230 69 83);
    --ctp-peach: rgb(254 100 11);
    --ctp-yellow: rgb(223 142 29);
    --ctp-green: rgb(64 160 43);
    --ctp-teal: rgb(23 146 153);
    --ctp-sky: rgb(4 165 229);
    --ctp-sapphire: rgb(32 159 181);
    --ctp-blue: rgb(30 102 245);
    --ctp-lavender: rgb(114 135 253);
    --ctp-text: rgb(76 79 105);
    --ctp-subtext1: rgb(92 95 119);
    --ctp-subtext0: rgb(108 111 133);
    --ctp-overlay2: rgb(124 127 147);
    --ctp-overlay1: rgb(140 143 161);
    --ctp-overlay0: rgb(156 160 176);
    --ctp-surface2: rgb(172 176 190);
    --ctp-surface1: rgb(188 192 204);
    --ctp-surface0: rgb(204 208 218);
    --ctp-base: rgb(239 241 245);
    --ctp-mantle: rgb(230 233 239);
    --ctp-crust: rgb(220 224 232);
    --callout-blend-mode: darken;
}
.mocha {
    --ctp-rosewater: rgb(245 224 220);
    --ctp-flamingo: rgb(242 205 205);
    --ctp-pink: rgb(245 194 231);
    --ctp-mauve: rgb(203 166 247);
    --ctp-red: rgb(243 139 168);
    --ctp-maroon: rgb(235 160 172);
    --ctp-peach: rgb(250 179 135);
    --ctp-yellow: rgb(249 226 175);
    --ctp-green: rgb(166 227 161);
    --ctp-teal: rgb(148 226 213);
    --ctp-sky: rgb(137 220 235);
    --ctp-sapphire: rgb(116 199 236);
    --ctp-blue: rgb(137 180 250);
    --ctp-lavender: rgb(180 190 254);
    --ctp-text: rgb(205 214 244);
    --ctp-subtext1: rgb(186 194 222);
    --ctp-subtext0: rgb(166 173 200);
    --ctp-overlay2: rgb(147 153 178);
    --ctp-overlay1: rgb(127 132 156);
    --ctp-overlay0: rgb(108 112 134);
    --ctp-surface2: rgb(88 91 112);
    --ctp-surface1: rgb(69 71 90);
    --ctp-surface0: rgb(49 50 68);
    --ctp-base: rgb(30 30 46);
    --ctp-mantle: rgb(24 24 37);
    --ctp-crust: rgb(17 17 27);
    --callout-blend-mode: lighten;
}

@theme {
    --color-*: initial;
    --font-sans: "Inter", "ui-sans-serif", "system-ui", "sans-serif";
    --font-serif: "IBM Plex Serif", "ui-serif", "serif";

    --text-inherit: inherit;
    --p-callout: 12px 12px 12px 24px;

    /* 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;
}

@theme inline {
    --color-rosewater: var(--ctp-rosewater);
    --color-flamingo: var(--ctp-flamingo);
    --color-pink: var(--ctp-pink);
    --color-mauve: var(--ctp-mauve);
    --color-red: var(--ctp-red);
    --color-maroon: var(--ctp-maroon);
    --color-peach: var(--ctp-peach);
    --color-yellow: var(--ctp-yellow);
    --color-green: var(--ctp-green);
    --color-teal: var(--ctp-teal);
    --color-sky: var(--ctp-sky);
    --color-sapphire: var(--ctp-sapphire);
    --color-blue: var(--ctp-blue);
    --color-lavender: var(--ctp-lavender);
    --color-text: var(--ctp-text);
    --color-subtext1: var(--ctp-subtext1);
    --color-subtext0: var(--ctp-subtext0);
    --color-overlay2: var(--ctp-overlay2);
    --color-overlay1: var(--ctp-overlay1);
    --color-overlay0: var(--ctp-overlay0);
    --color-surface2: var(--ctp-surface2);
    --color-surface1: var(--ctp-surface1);
    --color-surface0: var(--ctp-surface0);
    --color-base: var(--ctp-base);
    --color-mantle: var(--ctp-mantle);
    --color-crust: var(--ctp-crust);
}

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

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

    h2:has(a.header-anchor) {
        @apply text-3xl text-mauve relative mb-8 no-underline;
        left: -1.75rem;
    }
    h2:has(a.header-anchor)::before {
        @apply text-2xl relative mr-1;
        top: 0.25rem;
        font-family: "bootstrap-icons";
        content: "\F4B4";
    }
}

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

@utility callout {
    @apply border-1 rounded-sm py-2 pl-2 pr-4 border-solid overflow-hidden;
    border-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-1 flex gap-2 items-start font-semibold text-inherit;
        color: rgb(var(--callout-color));

        .callout-title-icon {
            @apply flex items-center text-xl leading-7 mr-1;
            flex: 0 0 auto;
        }

        .callout-fold {
            @apply justify-self-end ml-auto;
            font-family: "bootstrap-icons";
            background-color: rgb(var(--callout-color));
        }
    }

    .callout-content {
        @apply overflow-x-auto pl-2;
    }
    &[data-callout="todo"],
    &[data-callout="info"],
    &[data-callout="note"] {
        --callout-color: var(--ctp-blue);
    }

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

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

    &[data-callout="danger"],
    &[data-callout="error"] {
        --callout-color: var(--ctp-red);
    }

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

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

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

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

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";
}