#search {
    --width: calc(8 * var(--space-l));
    --height: var(--space-l);

    font-size: var(--fs-200);

    & #search-bar {
        display: flex;
        flex-direction: column;
        align-items: center;

        & input {
            width: var(--width);
            height: var(--height);

            border-radius: var(--space-3xs);

            padding-block: var(--space-3xs);
            padding-inline: var(--space-xs);

            background: var(--clr-text);
            color: var(--clr-base);

            &::placeholder {
                color: var(--clr-base);
                opacity: 1;
            }
        }
    }

    & #search-results {
        width: var(--width);
    }
}

#search-results-content {
    --max-count: 5;

    z-index: 1;

    width: calc(1 * var(--width));
    max-height: calc(var(--max-count) * var(--height));

    overflow-x: hidden;
    overflow-y: auto;

    position: absolute;
    transform: translateY(var(--height));

    border-radius: var(--space-3xs);

    background: var(--clr-surface);
    box-shadow: inset 0 0 0 1px var(--clr-high);

    & li {
        display: block;
        width: 100%;
        position: relative;

        & button {
            cursor: pointer;
            width: inherit;
            height: var(--height);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            padding-block: var(--space-3xs);
            padding-inline: var(--space-xs);

            text-align: start;
            color: inherit;
            background: inherit;
            border-radius: var(--space-3xs);

            &:hover,
            &:focus,
            &:focus-visible {
                background: var(--clr-overlay);
            }
        }
    }
}
