globalsearch.scss

#quicksearch_item {
    align-self: flex-start;
}
#globalsearch-searchbar {
    display: flex;
    align-items: center;
    border: thin solid var(--color--font-inverted);
    border-radius: var(--border-radius-search);
    background-color: var(--color--brand-primary);
    padding: 3px 5px 2px 5px;
    margin-top: 6px;
    width: 220px;
    transition: width var(--transition-duration);

    &:focus-within {
        border-color: -webkit-focus-ring-color;
    }

    // Reset alignments among browsers
    > * {
        box-sizing: border-box;
    }

    &:not(.has-value) #globalsearch-clear {
        display: none;
    }

    #globalsearch-input {
        flex: 1;
        border: none;
        outline: none;
        margin-right: 5px;
        color: var(--color--font-inverted);
        background-color: var(--color--brand-primary);

        &::placeholder {
            color: var(--color--font-inverted);
        }
    }

    input[type=image] {
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
        margin: 0 5px;
    }

    // Hint toggle text
    #globalsearch-togglehints {
        font-size: $font-size-small;
        margin: 0 10px;

       @include icon('before', 'arr_1right', 'clickable', $font-size-small, 2px);

        // This is only neccessary to remove the whitespace in front of the text
        // Otherwise, the text would jump when getting replaced
        display: flex;
        align-items: center;

        + #globalsearch-hints {
            display: none;
        }

        &.open {
            &::before {
                transform: rotate(90deg);
            }

            + #globalsearch-hints {
                display: block;
                white-space: normal !important;
                margin: 0 10px;
            }
        }
    }

    // List display
    #globalsearch-list {
        background-color: var(--white);
        box-shadow: 1px 1px 1px var(--light-gray-color-80);
        color: var(--text-color);
        display: none;
        max-height: 90vh;
        overflow: hidden;
        padding: 10px 5px;
        position: absolute;
        width: 410px;
        top: 36px;
        margin-left: -5px;
        border-radius: var(--border-radius-default);

        a {
            color: var(--base-color);

            &:hover {
                color: var(--active-color);
            }
        }

        section {
            color: var(--text-color);

            header {
                margin: 5px 5px 0;
            }

            p {
                font-size: 12px;
                margin-left: 15px;
                margin-right: 10px;
            }
        }
    }

    &.is-visible {
        width: 400px;
        background-color: var(--white);

        #globalsearch-input {
            background-color: var(--white);
            color: var(--color--font-primary);

            &::placeholder {
                color: var(--color--font-primary);
            }
        }

        #globalsearch-icon {
            filter: brightness(0) saturate(100%) invert(25%) sepia(7%) saturate(6410%) hue-rotate(181deg) brightness(95%) contrast(88%);
        }

        #globalsearch-list {
            display: block;
        }
    }

    // "Searching..." info
    #globalsearch-searching {
        $icon-size: 32px;

        color: var(--dark-gray-color-45);
        display: none;
        text-align: center;

        background-image: url("#{$image-path}/loading-indicator.svg");
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: $icon-size;
        margin-bottom: 10px;
        padding-bottom: ($icon-size + 5px);
    }
    &.is-searching {
        #globalsearch-searching {
            display: block;
        }
        #globalsearch-results {
            display: none;
        }
    }

    #globalsearch-results {
        margin-top: 1em;
        height: 50vh;
        overflow: auto;

        &:empty {
            display: none;
        }

        article {
            border: 1px solid var(--content-color-40);
            margin: 0 10px 10px 10px;

            > header {
                background-color: var(--content-color-20);
                color: var(--base-color);

                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;

                font-weight: bold;
                padding: 3px;

                div.globalsearch-category {
                    flex: auto;
                }

                div.globalsearch-more-results {
                    font-size: $font-size-small;
                    font-weight: normal;
                    line-height: $font-size-h3;
                    margin-bottom: auto;
                    margin-top: auto;
                    text-align: right;
                    width: 100px;
                }
            }

            a[role=listitem] {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 6px;

                padding: 6px 6px 6px 0;

                border-top: 1px solid var(--content-color-40);
                transition: background-color var(--transition-duration);

                &:hover {
                    background-color: var(--dark-gray-color-20);
                }

                &.globalsearch-extended-result {
                    display: none;
                }

                & > span.detail {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    margin: 0;
                    width: 100%;
                }

                .globalsearch-result-img {
                    flex: 0;
                    margin-left: 6px;

                    img {
                        @include square(36px);
                    }
                }

                .globalsearch-result-data {
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;

                    .globalsearch-result-title {
                        font-size: $font-size-base;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .globalsearch-result-details {
                        color: var(--black);
                        font-size: $font-size-small;
                    }
                }

                .globalsearch-result-time {
                    color: var(--dark-gray-color-80);
                    flex: 0;
                    font-size: $font-size-small;
                    text-align: right;
                    white-space: nowrap;
                }

                .globalsearch-result-expand {
                    flex: 0;
                    margin: 20px 0 0 -32px;

                    a {
                        @include background-icon(arr_1right, $size: 24px);
                        @include square(24px);
                        display: inline-block;
                    }
                }
            }
        }
    }
}

#search_legend {
    input {
        position: absolute;
        right: 0.5em;
        top: 0.438em;
    }
}

html.responsive-display {
    #quicksearch_item {
        align-self: center;
    }
    #globalsearch-searchbar {
        position: static;
        top: 0;

        #globalsearch-input {
            width: 80vw;
        }
        #globalsearch-icon {
            left: calc(100% - 16px);
            margin-left: 0;
        }
        #globalsearch-list {
            $padding: 5px;

            position: absolute;
            left: $padding;
            top: calc($bar-bottom-container-height + $padding);
            width: calc(100vw - (2 * $padding));
        }
    }
}
html:not(.size-large) {
    &:not(.globalsearch-visible) {
        #globalsearch-list,
        #globalsearch-clear {
            display: none;
        }
    }

    &.globalsearch-visible {
        #header-links ul {
            li {
                display: none;
            }
            #quicksearch_item,
            #sidebar-menu {
                display: initial;
            }
        }

        .helpbar {
            z-index: 0;
        }

        #navigation-level-1,
        #current-page-structure,
        #sidebar,
        #content-wrapper,
        #main-footer,
        #scroll-to-top
        {
            position: relative;
            filter: blur(1px);
        }

        body::before {
            content: ' ';
            display: block;
            position: fixed;
            top: $bar-bottom-container-height;
            right: -1px;
            bottom: -1px;
            left: -1px;
            background: mix($base-color, rgba(255,0,0,0), 50%);
            z-index: 5;
            pointer-events: none;
        }
    }
}