@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    /* Fonts */
    @font-face {
        font-family: IosevkaTermNerdFontMono;
        font-style: normal;
        font-weight: 400;
        src: url("/fonts/IosevkaTermNerdFontMono-Regular.ttf")
            format("truetype");
    }

    @font-face {
        font-family: IosevkaTermNerdFontMono;
        font-style: normal;
        font-weight: 700;
        src: url("/fonts/IosevkaTermNerdFontMono-Bold.ttf") format("truetype");
    }

    /* Theme-specific CSS variables */
    :root.catpuccin-latte {
        --theme-bg: theme("colors.catppuccin.latte.base");
        --theme-text: theme("colors.catppuccin.latte.text");
        --theme-border: theme("colors.catppuccin.latte.overlay");
        --theme-border-hover: theme("colors.catppuccin.latte.surface");
        --theme-border-focus: theme("colors.catppuccin.latte.brightGreen");
        --theme-item-focus: theme("colors.catppuccin.latte.brightBlue");
        --theme-ring: theme("colors.catppuccin.latte.green");

        --theme-cursor: theme("colors.catppuccin.latte.cursor");
        --theme-cursor-text: theme("colors.catppuccin.latte.base");

        --theme-black: theme("colors.catppuccin.latte.black");
        --theme-red: theme("colors.catppuccin.latte.red");
        --theme-green: theme("colors.catppuccin.latte.green");
        --theme-yellow: theme("colors.catppuccin.latte.yellow");
        --theme-blue: theme("colors.catppuccin.latte.blue");
        --theme-magenta: theme("colors.catppuccin.latte.magenta");
        --theme-cyan: theme("colors.catppuccin.latte.cyan");
        --theme-white: theme("colors.catppuccin.latte.white");
    }

    :root.catpuccin-frappe {
        --theme-bg: theme("colors.catppuccin.frappe.base");
        --theme-text: theme("colors.catppuccin.frappe.text");
        --theme-border: theme("colors.catppuccin.frappe.overlay");
        --theme-border-hover: theme("colors.catppuccin.frappe.surface");
        --theme-border-focus: theme("colors.catppuccin.frappe.brightGreen");
        --theme-item-focus: theme("colors.catppuccin.frappe.brightBlue");
        --theme-ring: theme("colors.catppuccin.frappe.green");

        --theme-cursor: theme("colors.catppuccin.frappe.cursor");
        --theme-cursor-text: theme("colors.catppuccin.frappe.base");

        --theme-black: theme("colors.catppuccin.frappe.black");
        --theme-red: theme("colors.catppuccin.frappe.red");
        --theme-green: theme("colors.catppuccin.frappe.green");
        --theme-yellow: theme("colors.catppuccin.frappe.yellow");
        --theme-blue: theme("colors.catppuccin.frappe.blue");
        --theme-magenta: theme("colors.catppuccin.frappe.magenta");
        --theme-cyan: theme("colors.catppuccin.frappe.cyan");
        --theme-white: theme("colors.catppuccin.frappe.white");
    }

    :root.catpuccin-macchiato {
        --theme-bg: theme("colors.catppuccin.macchiato.base");
        --theme-text: theme("colors.catppuccin.macchiato.text");
        --theme-border: theme("colors.catppuccin.macchiato.overlay");
        --theme-border-hover: theme("colors.catppuccin.macchiato.surface");
        --theme-border-focus: theme("colors.catppuccin.macchiato.brightGreen");
        --theme-item-focus: theme("colors.catppuccin.macchiato.brightBlue");
        --theme-ring: theme("colors.catppuccin.macchiato.green");

        --theme-cursor: theme("colors.catppuccin.macchiato.cursor");
        --theme-cursor-text: theme("colors.catppuccin.macchiato.base");

        --theme-black: theme("colors.catppuccin.macchiato.black");
        --theme-red: theme("colors.catppuccin.macchiato.red");
        --theme-green: theme("colors.catppuccin.macchiato.green");
        --theme-yellow: theme("colors.catppuccin.macchiato.yellow");
        --theme-blue: theme("colors.catppuccin.macchiato.blue");
        --theme-magenta: theme("colors.catppuccin.macchiato.magenta");
        --theme-cyan: theme("colors.catppuccin.macchiato.cyan");
        --theme-white: theme("colors.catppuccin.macchiato.white");
    }

    :root.catpuccin-mocha {
        --theme-bg: theme("colors.catppuccin.mocha.base");
        --theme-text: theme("colors.catppuccin.mocha.text");
        --theme-border: theme("colors.catppuccin.mocha.overlay");
        --theme-border-hover: theme("colors.catppuccin.mocha.surface");
        --theme-border-focus: theme("colors.catppuccin.mocha.brightGreen");
        --theme-item-focus: theme("colors.catppuccin.mocha.brightBlue");
        --theme-ring: theme("colors.catppuccin.mocha.green");

        --theme-cursor: theme("colors.catppuccin.mocha.cursor");
        --theme-cursor-text: theme("colors.catppuccin.mocha.base");

        --theme-black: theme("colors.catppuccin.mocha.black");
        --theme-red: theme("colors.catppuccin.mocha.red");
        --theme-green: theme("colors.catppuccin.mocha.green");
        --theme-yellow: theme("colors.catppuccin.mocha.yellow");
        --theme-blue: theme("colors.catppuccin.mocha.blue");
        --theme-magenta: theme("colors.catppuccin.mocha.magenta");
        --theme-cyan: theme("colors.catppuccin.mocha.cyan");
        --theme-white: theme("colors.catppuccin.mocha.white");
    }

    /* apply */
    :root {
        background-color: var(--theme-bg);
        color: var(--theme-text);
        border-color: var(--theme-border);

        font-family: IosevkaTermNerdFontMono, monospace;
    }
}

/* Common Card Component Styles */
@layer components {
    .card {
        position: relative;
        height: 100%;
        border: 1.3px solid;
        border-radius: 5px;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }

    .card .title {
        position: absolute;
        top: -12px;
        left: 16px;
        padding: 0 0.2rem;
        font-weight: bold;
    }

    .card .title .text {
        background: var(--theme-bg);
    }

    .card .selection-index {
        position: absolute;
        right: 16px;
        bottom: -12px;
        padding: 0 0.2rem;
        font-weight: regular;
        font-variant: monospace;
        background: var(--theme-bg);
    }

    .card .items {
        overflow-y: scroll;
        height: 100%;
    }

    .card .item {
        color: var(--theme-text);
        cursor: pointer;
        outline: none;
        font-size: 0.875rem;
        min-width: 7.5rem;
        padding: 0 0.625rem;
    }

    .card .item::before {
        content: "\00a0";
    }

    .card .item:hover {
        background-color: var(--theme-border);
        color: var(--theme-text);
    }

    .card .item.active,
    .card .item.active.selected {
        background-color: var(--theme-cursor);
        color: var(--theme-cursor-text);
        font-weight: bold;
    }

    .card .item.active.selected::before {
        content: "* ";
        color: var(--theme-cursor-text);
        font-weight: normal;
    }

    .card .item.selected {
        font-weight: bold;
    }

    .card .item.selected::before {
        content: "* ";
        color: var(--theme-ring);
        font-weight: normal;
    }

    .card .content {
        overflow-y: auto;
        height: 100%;
    }

    .card.active {
        border-color: var(--theme-ring);
    }

    .card.active .title .text {
        color: var(--theme-ring);
    }

    .card.active .selection-index span {
        color: var(--theme-ring);
    }
}