/* 
    Author: Digit (https://www.rebitwise.com/)
    License: This CSS is provided for free use and distribution. 
            You are free to copy, modify, and distribute this file without any restrictions.
*/

.lcd-panel {
    /* colors */
    --bg-color-1: #893;
    --bg-color-2: #794;
    --lcd-shadow: #0000770c;
    --text-color: #123c;
    --inset-shadow-color: #0006;
    --text-shadow-color: #0002;
    --glow-color: #0000;
    --bg: radial-gradient(circle, var(--bg-color-1) 0%, var(--bg-color-2) 100%);

    /* size and scale */
    --scale: 50px;
    --padding-factor: .5;
    --border-factor: .2;
    --spacing-factor: 0.05;
    --margin-percent: 0.05;
    --width: 16;
    --height: 2;

    --padding: calc(var(--scale) * var(--padding-factor));
    --border-width: calc(var(--scale) * var(--border-factor));

    /* text */
    --font: monospace;
    --text-align: left; /* left, center, right */

    /* pixel mask (advanced usage) */
    --font-pixels-per-em: 8; /* how many pixels tall the pixel font is, *including* any line-spacing */
    --font-pixel-size: calc(1em / var(--font-pixels-per-em)); /* size of a single pixel, assuming square pixels */
    --pixel-mask-thickness-factor: .01;
    --pixel-mask-thickness: calc(1em * var(--pixel-mask-thickness-factor));
    --pixel-mask-opacity: 0;

    /* pixel mask is defined as a conic gradient to make a grid, width is defined as a fraction of the pixel size, calculated above */
    /* the first two values are the thickness in x and y direction. User has to provide how many pixels tall the font is */
    --pixel-mask: 
        conic-gradient(
            from 90deg at 
                var(--pixel-mask-thickness) 
                var(--pixel-mask-thickness), 
                black 90deg, 
                rgba(0, 0, 0, calc(1 - var(--pixel-mask-opacity))) 
                0
        );

    /* animation */
    --animation: none; /* none, scroll, blink */
    --scroll-speed: 150ms;
    --animation-pause-time: 2000ms;
    --blink-duration: 200ms;
    --typewriter-speed: 100ms;

    /* shadow */
    --box-shadow: var(--crisp-shadow);
    --shadow-length: 0.15;
    --shadow-blur: 0.3; 
    --soft-shadow: 0 0 1ch calc(1ch / 5) var(--inset-shadow-color) inset;
    --crisp-shadow: 
        calc(1ch * var(--shadow-length)) /* x offset */
        calc(1ch * var(--shadow-length)) /* y offset */
        calc(1ch * var(--shadow-blur) / 10) /* blur radius */
        var(--inset-shadow-color) /* color */
        inset;
    --text-shadow: 
        calc(1ch * var(--shadow-length)) /* x offset */
        calc(1ch * var(--shadow-length)) /* y offset */
        calc(1ch * var(--shadow-blur) / 10) /* blur radius */
        var(--text-shadow-color); /* color */

    font-family: var(--font);
    background: var(--bg);
    color: var(--text-color);
    box-shadow:
        var(--box-shadow),
        0 0 100px var(--glow-color);
    padding: var(--padding);
    font-size: calc(var(--scale) * (1 - var(--margin-percent) * 2));
    position: relative;
    display: inline-block;
    border: solid var(--border-width);
    border-image: linear-gradient(90deg, #222 0%, #444 45%, #555 50%, #444 55%, #222 100%) 1;
    min-width: calc((1ch + (var(--margin-percent) * 2) * var(--scale)) * var(--width) + var(--padding));
    min-height: calc(var(--scale) * var(--height));
    list-style-type: none;
    text-shadow: var(--text-shadow);
    user-select: none;
}

.lcd-backlit {
    --bg-color-1: #ab1;
    --bg-color-2: #bd1;
    --text-color: #123b;
    --lcd-shadow: #00000008;
    --inset-shadow-color: #ae2;
    --glow-color: #aa72;
    --text-shadow-color: #0000;
    --box-shadow: var(--soft-shadow);
}

.lcd-panel::after {
    content: '';
    position: absolute;
    top: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    bottom: calc(var(--border-width) * -1);
    background-image: url("https://www.rebitwise.com/res/img/noise.png");
    background-size: 100%;
    mix-blend-mode: multiply;
    opacity: .06;
    pointer-events: none;
}

.lcd-panel-char {
    display: inline-block;
    position: relative;
    margin: calc(var(--scale) * var(--margin-percent));
    vertical-align: top;
    background-color: var(--lcd-shadow);
    mask-image: var(--pixel-mask);
    mask-size: var(--font-pixel-size) var(--font-pixel-size);
    /* ensure that the pixel mask falls between pixels */
    mask-position: 
        calc(var(--pixel-mask-thickness) / -2)
        calc(var(--pixel-mask-thickness) / -2);
    width: 1ch;
    height: 1em;
}

/* Style presets */

.lcd-calc {
    --bg-color-1: #ada;
    --bg-color-2: #8a7;
}

.lcd-calc.lcd-backlit {
    --bg-color-1: #9cb;
    --bg-color-2: #698;
    --inset-shadow-color: #9cb;
    --glow-color: #7a92;
}

.lcd-cheap {
    --bg-color-1: #675;
    --bg-color-2: #675;
    --text-color: #123c;
    --text-shadow-color: #0003;
    --lcd-shadow: #00007712;
}

.lcd-cheap.lcd-backlit {
    --bg-color-1: #784;
    --bg-color-2: #784;
    --inset-shadow-color: #9a3;
    --text-shadow-color: #0001;
}

.lcd-invert {
    --bg-color-1: #14e;
    --bg-color-2: #11c;
    --text-color: #aaa;
    --lcd-shadow: #00000015;
    --inset-shadow-color: #115a;
    --box-shadow: var(--soft-shadow);
    /* inverted panels have shadows on the inside of the text, but I'm limited by the technology of my time */
    --text-shadow-color: #0000
}

.lcd-invert.lcd-backlit {
    --bg-color-1: #25f;
    --bg-color-2: #22d;
    --text-color: #eee;
    --lcd-shadow: #00000015;
    --inset-shadow-color: #27f;
    --glow-color: #27f2;
}