@use 'sass:color';

@use 'constants' as consts;

#search {
    position: relative;
    display: inline-flex;
    align-items: center;

    input {
        width: 100%;
        line-height: 28px;
        padding: 0 1rem;
        padding-left: 2.5rem;
        border-radius: 8px;
        background-color: consts.$color-2;
    }

    input::placeholder {
        color: consts.$text-dimished;
    }

    .icon {
        position: absolute;
        left: 1rem;
        fill: consts.$color-3;
        width: 1rem;
        height: 1rem;
    }

    .results {
        display: none;
        z-index: 2;
        position: absolute;
        background-color: white;
        vertical-align: top;
        top: 100%;

        border: solid 1px consts.$color-3;
        background-color: consts.$color-1;
        box-shadow: 0 0 5px color.adjust(consts.$color-3, $lightness: -20%);

        .message {
            display: hidden;
            padding:
                var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
        }

        ul {
            padding: 0px;
            margin: 0px;

            li {
                padding:
                    var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));

                list-style-type: none;

                em {
                    font-weight: bold;
                }
            }

            li:nth-child(odd) {
                background: consts.$color-2;
            }
        }
    }
}

#hidden-templates-search {
    display: none;
}