@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Poppins&display=swap');

:root {
	--rem: clamp(0px, 1.5vh, 24px);

    --pri-colour-darkest: #051823;
    --pri-colour-em-darker: #092533;
    --pri-colour-m-darker: #1c4d67;
    --pri-colour-darker: #307aa0;
    --pri-colour-medium: #4dbaf3;
    --pri-colour-lighter: #98d7fc;
    --pri-colour-lightest: #bde4fc;

    --sec-colour-darkest: #00272b;
    --sec-colour-m-darker: #015259;
    --sec-colour-darker: #02818b;
    --sec-colour-medium: #03c4d4;
    --sec-colour-lighter: #8adee7;
    --sec-colour-lightest: #b6e9ee;

    --red-colour-darkest: #33191b;
    --red-colour-m-darker: #67383c;
    --red-colour-darker: #a15a60;
    --red-colour-medium: #f48a94;
    --red-colour-lighter: #ffb8bc;
    --red-colour-lightest: #ffd1d3;

    --shades-darkest: #000000;
    --shades-em-darker: #222222;
    --shades-m-darker: #484848;
    --shades-darker: #717171;
    --shades-medium: #aeaeae;
    --shades-lighter: #cecece;
    --shades-em-lighter: #dedede;
    --shades-lightest: #ffffff;
    
    --opacity-none: 0;
    --opacity-low: 0.25;
    --opacity-medium: 0.5;
    --opacity-high: 0.75;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    height: 100%;
    min-height: 100vh;
}

body {
    font-size: clamp(8px, 1.5vh, 24px);
    margin: 0;
    height: 100%;
    min-height: 100vh;
    background: url('../assets/nycss-bg-pattern.png') 0 0.1dvh / 5dvh repeat,
    linear-gradient(45deg, black, var(--pri-colour-em-darker)),
    #0C2430;
}

#code-editor-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2rem;
    gap: 2rem;
    box-sizing: border-box;

    > button {
        cursor: pointer;
        flex: 0;
        border-radius: 999px;
        font-weight: bold;
        border: none;
        box-shadow: inset 0 0 1em 0 var(--shades-darkest);
        background: var(--sec-colour-lighter);
        transition: 0.25s;
        padding: 1em 3.25em;

        &:hover {
            background: var(--sec-colour-lightest);
        }
    }

    > #code-editor {
        position: relative;
        height: 100%;
        width: auto;
        --gutter-width: 0.5;
        --editor-width: 5;
        --total-width: calc(var(--gutter-width) + (2 * var(--editor-width)));

        display: flex;
        justify-content: center;
        gap: calc((var(--gutter-width) / var(--total-width)) * 100%);
			
        .editorGroup {
            height: 100%;
            width: 100%;

            &:has(button:active) {
                --onClickValue1: 0.75;
                --opacity-medium: var(--onClickValue2, unset);
                animation: onClick 1s;
            }

            &:has(#inputEditor.drag-hover) {
                --opacity-medium: 0.75;
            }
        }

        .editorTab {
            --background-colour: rgb(from var(--shades-darkest) r g b / 0.25);
            --window-text-colour: rgb(from var(--shades-darker) r g b / var(--opacity-medium));
            line-height: 100%;
            color: rgb(from var(--shades-medium) r g b / 50%);
            font-family: "Fira Code", monospace;
            border: 0.25rch solid var(--window-text-colour);
            border-radius: 1rem 1rem 0 0;
            border-bottom: none;
            background-color: var(--background-colour);
            display: flex;
            justify-content: space-between;
            padding: 0.75rem !important;
        
            > .fileName {
                font-size: 1rem;
                align-content: center;
            }
        
            > .tabButtons {
                font-size: 0.5rem;
                display: flex;
                gap: 1em;
        
                > button {
                    font-size: inherit;
                    height: 4em;
                    width: 4em;
                    border: none;
                    border-radius: 50%;
                    background-color: transparent;
                    background-position: center;
                    background-size: cover;
                    filter: invert(0.4431);
                    opacity: var(--opacity-medium);
                    cursor: pointer;

                    &.tabCopyAll { background-image: url('../assets/icon-copy.svg') }
                    &.tabOpenRaw { background-image: url('../assets/icon-open-external.svg') }
                    &.tabInsertCSS { background-image: url('../assets/icon-add-file.svg') }
                    &.tabDeleteAll { background-image: url('../assets/icon-erase.svg') }
                }
            }
        }

        .editor {
            /*
            height: calc(100% - (editorTab's total height)
            height: calc(100% - (<editorTab's "padding-block"> + <height of buttons>)
            height: calc(100% - ((2 * 0.75rem) + 2rem));
            */
            
            height: calc(100% - 3.5rem);
            width: auto;
            aspect-ratio: var(--editor-width) / 6.625;
        }
    }
}