:root {
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;
    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;

    --gutter: hsl(from var(--base03) h s 10%);
    --line-highlight: rgba(from var(--orange) r g b / 0.3);
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: system-ui;
    font-size: 14px;
    color: var(--base1);
    user-select: none;

    &.index {
        display: grid;
        --sidebar-width: min(30%, 24rem);
        grid-template-columns: var(--sidebar-width) 1.5ch 1fr;
        overflow: hidden;
        background: var(--base03);

        @media screen and (width <= 480px) {
            --sidebar-width: 80%;
        }

        &:has(#sidebar-toggle:checked) {
            grid-template-columns: 1.5ch 1fr;
        }
    }

    &.results.error {
        display: grid;
        place-items: center;
    }

    &.file {
        min-width: max-content;
        background: var(--base03);
        user-select: unset;
    }
}

a {
    color: var(--base3);
}

aside {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--base02);

    &:has(+ #sidebar-toggle:checked) {
        display: none;
    }
}

form {
    background: var(--base01);
    color: var(--base3);
    box-shadow: 0 0.2rem 0.6rem var(--base03);
}

input[type="search"] {
    appearance: none;
    all: unset;
    font-size: 110%;
    padding: 0.8rem 1rem 0.6rem;
    width: 100%;
    box-sizing: border-box;
    color: inherit;

    &::placeholder {
        color: var(--base1);
        font-style: italic;
    }
}

.filetypes {
    display: flex;
    justify-content: space-around;
    line-height: 3;

    .ft {
        display: flex;
        align-items: center;
    }

    input {
        display: block;
        width: 1rem;
        height: 1rem;
        margin: 0;
    }

    label {
        padding-inline-start: 0.5rem;
    }
}

#results-list {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    padding-top: 0.4rem;
    list-style-type: none;

    li > a {
        display: block;
        padding: 0.4rem 0.5rem;
        color: var(--base2);

        direction: rtl;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

#error {
    max-width: 20rem;
    text-align: center;
}

#sidebar-toggle {
    all: unset;
    position: relative;
    margin: 0;
    font-family: monospace, monospace;
    background: var(--gutter);
    --switch: -1;
    box-shadow: -1px 0 var(--base02) inset;

    &:checked {
        --switch: 1;
    }

    &::before,
    &::after {
        position: absolute;
        content: "";
        left: 0.25rem;
        width: calc(100% - 0.5rem);
        aspect-ratio: 1 / 1;
        background: linear-gradient(
            calc(var(--gradient-rot) * var(--switch)),
            var(--base2) 50%,
            transparent 50%
        );
    }

    &::before {
        bottom: 50%;
        --gradient-rot: 45deg;
    }

    &::after {
        top: 50%;
        --gradient-rot: 135deg;
    }
}

main {
    position: relative;

    > * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#empty-view {
    display: grid;
    place-items: center;
}

pre {
    font-family: monospace, monospace;
    margin: 0;
    padding: 1ch;
    line-height: 1.5;
    counter-reset: --line;

    background: linear-gradient(to right, var(--gutter) 6ch, transparent 6ch, transparent);

    .line {
        position: relative;
    }

    .line::before {
        display: inline-block;
        content: counter(--line) "\020\020";
        counter-increment: --line;
        text-align: end;
        width: 6ch;
        color: var(--base01);
    }

    .highlighted-word,
    .highlighted-word > * {
        background: yellow;
        color: black !important;
    }

    .line.highlighted::after {
        display: inline-block;
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 1lh;
        background: var(--line-highlight);
    }
}