/** Computer Displays
 * SVG-based computer screen visualizations
 */

computer {
    /* Text colors for different screen types */
    --computer-text-color:          var(--text-color);
    --computer-text-inv-color:      var(--color-mono-1);
    --computer-text-color--vintage: #af7;

    /* Base display */
    display: block;
    position: relative;
    margin: var(--margin-block) auto;
    width: 100%;
    font-style: normal;
    color: var(--computer-text-color);

    /* Define as container for cqw units */
    container-type: inline-size;

    /* SVG frame fills the container */
    .computer-frame {
        display: block;
        width: 100%;
        height: 100%;
        ;
    }

    /* Content wrapper overlays the screen area */
    .computer-screen-content {
        position: absolute;
        overflow-y: auto;
        padding: 1.2em;

        display: flex;
        flex-direction: column;
        gap: 0.75em;

        font-size: max(0.8em, 2.5cqw);
        font-family: var(--code-font-family);

        & > * {
            line-height: 1.2 !important;
            margin: 0 !important;
            color: inherit !important;
            border: none;
            flex-shrink: 0;
            height: fit-content;
        }

        :is(h1, h2, h3, h4, h5, h6) {
            font-weight: bold;
            color: inherit !important;
        }

        h1 { font-size: 1.3em !important; }
        h2 { font-size: 1.2em !important; }
        h3 { font-size: 1.15em !important; }
        h4 { font-size: 1.1em !important; }
        h5 { font-size: 1.05em !important; }
        h6 { font-size: 1.0em !important; }

        img {
            max-width: min(100%, 30ch);
        }

        code, pre {
            color: inherit;
            font-family: var(--code-font-family);
        }

        pre[data-lang] > code {
            padding: 0.7em 0.9em !important;
        }

        em, strong {
            color: inherit;
        }

        abbr {
            text-decoration: none;
            pointer-events: none;
        }
    }

    /* TYPE: DESKTOP / SIMPLE */
    &:is([type="desktop"], [type="simple"]) {
        max-width: 44rem;
        aspect-ratio: 2791 / 2310;

        .computer-screen-content {
            top: 1.75%;
            left: 1.49%;
            width: 97.0%;
            height: 68.8%;
        }
    }

    /* TYPE: WINDOW */
    &[type="window"] {
        max-width: 44rem;
        aspect-ratio: 2791 / 2310;

        .computer-screen-content {
            /* Position inside the white document area (below title bar) */
            top: 8.05%;
            left: 9.31%;
            width: 81.37%;
            height: 58.91%;
            color: var(--computer-text-inv-color);
            padding: 0.8em;
        }
    }

    /* TYPE: LAPTOP */
    &[type="laptop"] {
        max-width: 40rem;
        aspect-ratio: 1434 / 825;

        .computer-screen-content {
            top: 2.18%;
            left: 10.81%;
            width: 78.24%;
            height: 87.88%;
        }
    }

    /* TYPE: TABLET */
    &[type="tablet"] {
        max-width: 36em;
        aspect-ratio: 1024 / 694;

        .computer-screen-content {
            top: 4.32%;
            left: 2.93%;
            width: 94.1%;
            height: 91.4%;
        }
    }

    /* TYPE: MOBILE */
    &[type="mobile"] {
        max-width: 18em;
        aspect-ratio: 384 / 694;

        .computer-screen-content {
            top: 2.74%;
            left: 5.21%;
            width: 89.6%;
            height: 94.2%;
        }
    }

    /* TYPE: VINTAGE / 1980s */
    &:is([type="vintage"], [type="1980s"]) {
        max-width: 40em;
        aspect-ratio: 2360 / 2103;

        .computer-screen-content {
            top: 8.56%;
            left: 7.63%;
            width: 84.75%;
            height: 71.33%;
            color: var(--computer-text-color--vintage);

            pre[data-lang],
            pre[data-lang] > code {
                background-color: transparent !important;
                padding-inline: 0 !important;
            }
        }
    }

    /* TYPE: MACINTOSH / MAC */
    &:is([type="macintosh"], [type="mac"]) {
        max-width: 30em;
        aspect-ratio: 1212.377 / 1597;

        .computer-screen-content {
            top: 13.76%;
            left: 12.67%;
            width: 73.27%;
            height: 37.34%;
            color: var(--computer-text-inv-color);
        }
    }
}