@import '/static/formatting.css';

:root {
    --background: #fff;
    --foreground: #000;

    --anchor-foreground: #000;
    --anchor-foreground-hover: #fff;

    --sidebar-background: #ffffff;
    --sidebar-border: 4px solid #d3d3d3;

    --button-background: #000;
    --button-background-hover: #252525;
    --button-foreground: #fff;

    --input-background: #ffffff;
    --input-foreground: #000;
    --input-border: #000;

    --textarea-background: #fff;
    --textarea-foreground: #000;
    --textarea-foreground-placeholder: #ddd;

    --pad: 8px;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}

body {
    width: 100%;
    min-height: 100vh;
    color: var(--foreground);
}

body:has(#form-upload) {
    display: flex;
    flex-direction: row;
}

main,
header,
footer {
    width: 40%;
    margin: calc(var(--pad) * 2) auto;
}

ul li,
ol li {
    margin-left: 4em;
}

blockquote {
    padding-left: 0.5em;
    border-left: var(--sidebar-border);
}

button {
    background: var(--button-background);
    color: var(--button-foreground);
    border: none;
    padding: var(--pad);
    font-size: 1em;
}

button:hover {
    background: var(--button-background-hover);
    cursor: pointer;
}

input[type="text"] {
    background: var(--input-background);
    color: var(--input-foreground);
    border: 2px solid var(--input-border);
    padding: var(--pad);
    outline: none;
}

table.vertical th {
    text-align: left;
}

a {
    color: var(--anchor-foreground);
}

a:hover {
    color: var(--anchor-foreground-hover);
    background-color: var(--anchor-foreground);
    text-decoration: line-through;
}

a:has(> img:only-child):hover {
    background-color: initial;
    text-decoration: none;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: calc(var(--pad) * 2) 0;
}

/** PASTE UPLOAD */
#form-upload {
    display: flex;
    flex-direction: row;
}

body>#form-upload {
    flex-grow: 1;
}

.paste-data {
    display: flex;
    flex-grow: 2;
}

.paste-data>.paste-contents {
    background: var(--textarea-background);
    color: var(--textarea-foreground);

    display: flex;
    flex-grow: 1;
    resize: none;
    padding: var(--pad);
    border: none;
}

.paste-data>.paste-contents::placeholder {
    color: var(--textarea-foreground-placeholder);
}

.paste-data>.paste-contents:disabled {
    color: var(--textarea-foreground);
}

.options {
    display: flex;
    flex-direction: column;
    gap: var(--pad);
}

/** PASTE CONTENTS */
.paste-contents pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/** SIDEBAR */
.sidebar {
    background: var(--sidebar-background);
    border-left: var(--sidebar-border);
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: calc(var(--pad) * 2);
    max-width: 20vw;
}

/** HIGHLIGHT FEATURES */
.pre:has(> .hljs) {
    flex-grow: 1;
}

@media screen and (max-width: 1200px) {
    #form-upload {
        flex-direction: column-reverse;
    }

    .sidebar {
        max-width: initial;
        max-height: 40vh;
        border-left: initial;
        border-bottom: var(--sidebar-border);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #000000;
        --foreground: #ffffff;

        --anchor-foreground: #ffffff;
        --anchor-foreground-hover: #000000;

        --sidebar-background: #24252c;
        --sidebar-border: 4px solid #15151d;

        --button-background: #c0c4ff;
        --button-background-hover: #7c81c7;
        --button-foreground: #15151d;

        --input-background: #32333a;
        --input-foreground: #ffffff;
        --input-border: #1a1a1d;

        --textarea-background: #202020;
        --textarea-foreground: #ffffff;
        --textarea-foreground-placeholder: #3f3f3f;
    }
}