/* ============================== Terminal Output ============================== */
.terminal {
    background: black;
    color: white;
    border: 1px solid #ccc;
    padding: 6px;
    font-family: var(--code-font);
    font-size: 13px;
    white-space: pre;
    overflow: auto;

    display: flex;
    flex-direction: column;
    gap: 0;
}

.terminal .line > span {
    display: inline-block;
    line-height: 3ex;
}

/* default theme */
.terminal {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);

    /* only used for monochromatic themes */
    --mono-fg-color: #ffffff;
    --mono-bg-color: #000000;

    /* standard ANSI colors */
    --ansi-black: rgb(0, 0, 0);
    --ansi-red: rgb(187, 0, 0);
    --ansi-green: rgb(0, 187, 0);
    --ansi-yellow: rgb(187, 187, 0);
    --ansi-blue: rgb(0, 0, 187);
    --ansi-magenta: rgb(187, 0, 187);
    --ansi-cyan: rgb(0, 187, 187);
    --ansi-white: rgb(255, 255, 255);

    --ansi-bright-black: rgb(85, 85, 85);
    --ansi-bright-red: rgb(255, 85, 85);
    --ansi-bright-green: rgb(0, 255, 0);
    --ansi-bright-yellow: rgb(255, 255, 85);
    --ansi-bright-blue: rgb(85, 85, 255);
    --ansi-bright-magenta: rgb(255, 0, 255);
    --ansi-bright-cyan: rgb(85, 255, 255);
    --ansi-bright-white: rgb(255, 255, 255);
}

.terminal.theme-white-on-black {
    --mono-bg-color: #000000;
    --mono-fg-color: #ffffff;
}

.terminal.theme-green-on-black {
    --mono-bg-color: #000000;
    --mono-fg-color: #31e74a;
}

.terminal.theme-black-on-white {
    --mono-bg-color: #ffffff;
    --mono-fg-color: #000000;
}

.terminal.theme-dracula {
    background-color: #282A36;
    color: #F8F8F2;

    --ansi-black: #3a3a3a;
    --ansi-red: #E64747;
    --ansi-green: #42E66C;
    --ansi-yellow: #E4F34A;
    --ansi-blue: #9B6BDF;
    --ansi-magenta: #E356A7;
    --ansi-cyan: #589faf;
    --ansi-white: #F8F8F2;

    --ansi-bright-black: #7e7e7e;
    --ansi-bright-red: #FF5555;
    --ansi-bright-green: #50FA7B;
    --ansi-bright-yellow: #F1FA8C;
    --ansi-bright-blue: #BD93F9;
    --ansi-bright-magenta: #FF79C6;
    --ansi-bright-cyan: #8BE9FD;
    --ansi-bright-white: #F9F9FB;
}

.terminal.theme-nord {
    background-color: #2E3440;
    color: #D8DEE9;

    --ansi-black: #5e6577;
    --ansi-red: #BF616A;
    --ansi-green: #A3BE8C;
    --ansi-yellow: #EBCB8B;
    --ansi-blue: #81A1C1;
    --ansi-magenta: #B48EAD;
    --ansi-cyan: #88C0D0;
    --ansi-white: #E5E9F0;

    --ansi-bright-black: #4C566A;
    --ansi-bright-red: #BF616A;
    --ansi-bright-green: #A3BE8C;
    --ansi-bright-yellow: #EBCB8B;
    --ansi-bright-blue: #81A1C1;
    --ansi-bright-magenta: #B48EAD;
    --ansi-bright-cyan: #8FBCBB;
    --ansi-bright-white: #ECEFF4;
}

.terminal.theme-ayu-light {
    background-color: rgb(250, 250, 250);
    color: #575F66;

    --ansi-black: #575F66;
    --ansi-red: #F51818;
    --ansi-green: #86B300;
    --ansi-yellow: #F2AE49;
    --ansi-blue: #399EE6;
    --ansi-magenta: #A37ACC;
    --ansi-cyan: #4CBF99;
    --ansi-white: #FAFAFA;

    --ansi-bright-black: #8A9199;
    --ansi-bright-red: #F51818;
    --ansi-bright-green: #86B300;
    --ansi-bright-yellow: #F2AE49;
    --ansi-bright-blue: #399EE6;
    --ansi-bright-magenta: #A37ACC;
    --ansi-bright-cyan: #4CBF99;
    --ansi-bright-white: #FAFAFA;
}

.terminal.theme-paper {
    background-color: #f2eede;
    color: #000000;

    --ansi-black: #000000;
    --ansi-red: #cc3e28;
    --ansi-green: #2c880d;
    --ansi-yellow: #b58900;
    --ansi-blue: #1e6fcc;
    --ansi-magenta: #5c21a5;
    --ansi-cyan: #179c96;
    --ansi-white: #aaaaaa;

    --ansi-bright-black: #555555;
    --ansi-bright-red: #cc3e28;
    --ansi-bright-green: #216609;
    --ansi-bright-yellow: #b58900;
    --ansi-bright-blue: #1e6fcc;
    --ansi-bright-magenta: #5c21a5;
    --ansi-bright-cyan: #158c86;
    --ansi-bright-white: #aaaaaa;
}

/*
 * Separate CSS classes for foreground and background colors.
 * Uses CSS variables so that themes only need to define each color once if needed.
 */
.terminal .ansi-black-fg { color: var(--ansi-black); } .terminal .ansi-black-bg { background-color: var(--ansi-black); }
.terminal .ansi-red-fg { color: var(--ansi-red); } .terminal .ansi-red-bg { background-color: var(--ansi-red); }
.terminal .ansi-green-fg { color: var(--ansi-green); } .terminal .ansi-green-bg { background-color: var(--ansi-green); }
.terminal .ansi-yellow-fg { color: var(--ansi-yellow); } .terminal .ansi-yellow-bg { background-color: var(--ansi-yellow); }
.terminal .ansi-blue-fg { color: var(--ansi-blue); } .terminal .ansi-blue-bg { background-color: var(--ansi-blue); }
.terminal .ansi-magenta-fg { color: var(--ansi-magenta); } .terminal .ansi-magenta-bg { background-color: var(--ansi-magenta); }
.terminal .ansi-cyan-fg { color: var(--ansi-cyan); } .terminal .ansi-cyan-bg { background-color: var(--ansi-cyan); }
.terminal .ansi-white-fg { color: var(--ansi-white); } .terminal .ansi-white-bg { background-color: var(--ansi-white); }
.terminal .ansi-bright-black-fg { color: var(--ansi-bright-black); } .terminal .ansi-bright-black-bg { background-color: var(--ansi-bright-black); }
.terminal .ansi-bright-red-fg { color: var(--ansi-bright-red); } .terminal .ansi-bright-red-bg { background-color: var(--ansi-bright-red); }
.terminal .ansi-bright-green-fg { color: var(--ansi-bright-green); } .terminal .ansi-bright-green-bg { background-color: var(--ansi-bright-green); }
.terminal .ansi-bright-yellow-fg { color: var(--ansi-bright-yellow); } .terminal .ansi-bright-yellow-bg { background-color: var(--ansi-bright-yellow); }
.terminal .ansi-bright-blue-fg { color: var(--ansi-bright-blue); } .terminal .ansi-bright-blue-bg { background-color: var(--ansi-bright-blue); }
.terminal .ansi-bright-magenta-fg { color: var(--ansi-bright-magenta); } .terminal .ansi-bright-magenta-bg { background-color: var(--ansi-bright-magenta); }
.terminal .ansi-bright-cyan-fg { color: var(--ansi-bright-cyan); } .terminal .ansi-bright-cyan-bg { background-color: var(--ansi-bright-cyan); }
.terminal .ansi-bright-white-fg { color: var(--ansi-bright-white); } .terminal .ansi-bright-white-bg { background-color: var(--ansi-bright-white); }

/* Class for any monochromatic theme */
.terminal.theme-mono { background-color: var(--mono-bg-color); color: var(--mono-fg-color); }
.terminal.theme-mono .ansi-black-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-black-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-red-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-red-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-green-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-green-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-yellow-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-yellow-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-blue-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-blue-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-magenta-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-magenta-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-cyan-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-cyan-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-white-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-white-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-black-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-black-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-red-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-red-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-green-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-green-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-yellow-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-yellow-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-blue-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-blue-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-magenta-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-magenta-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-cyan-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-cyan-bg { background-color: var(--mono-bg-color); }
.terminal.theme-mono .ansi-bright-white-fg { color: var(--mono-fg-color); } .terminal.theme-mono .ansi-bright-white-bg { background-color: var(--mono-bg-color); }