Search Results: Empty Results

.searchResults {
    @include stack-spacing(section);

    .mainContent > &:first-child,
    .pageHeader + & {
        @include stack-spacing(0);
    }

    .searchBar,
    .paginationBar {
        @include stack-spacing(0);
    }

    &-panel {

    }

    &-item {
        padding: var(--bp) 0;

        border: $_border-color var(--bw);
        border-style: solid none;

        margin-bottom: calc(-1 * var(--bw));

        &-title {
            @extend %link--stand-alone;
            @include stack-spacing(0);
        }

        &-description {
            @include stack-spacing();
        }

        &-metadata {
            @include stack-spacing(small);
        }

    }

    &-panel + &-item,
    &-item + &-panel {
        @include stack-spacing(component);
    }

    &-marker {
        $bleeding: .2em;
        $color: var(--information-background-color);

        border: $bleeding $color;
        border-style: none solid;
        background-color: $color;
        color: var(--information-color);

        font-weight: inherit;
    }

    &-placeholder {
        @include stack-spacing(component);

        @include apply-theme(warning);

        padding: var(--bp-small) var(--bp);
        @include border-radius(default, (border-top-left-radius, border-top-right-radius));

        background-color: var(--backdrop-color, #{$_backdrop-color});
        border-bottom: solid var(--bw-large) var(--border-color, #{$_accent-color});

        @include font-size(small);
    }

    @include only-on-desktop(){
        width: get-columns-width(8);
        margin-left: auto;
        margin-right: auto;
    }

}

.c-search {
    @extend %searchBar;

    form {
        margin-top: 0;
    }

    fieldset {
        margin: 0;
        padding: 0;
        border: none;
    }

    &__row {
        display: flex;
        align-items: flex-end;
        column-gap: calc(var(--bw) + 1px);

        width: 100%;
    }

    &__fieldwrap {
        flex: 1;

        @extend %formField;
        @include stack-spacing(0);
    }

    &__searchword {
        @extend %field;
        @extend %searchBar-field-input;
        @include stack-spacing(0);

        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

        @include not-on-desktop(){
            height: $field_height--mobile;
        }

    }

    &__fieldlabel {
        @extend %label;
        @include stack-spacing(0);
    }

    &__submit {
        @extend %button;
        border-radius: nth($field_border-radius, 1);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        background-image: svg-url($searchField_icon);
        background-position: center center;
        background-repeat: no-repeat;

        text-indent: calc(150% + 2 * #{nth($button_padding, 2)});
        white-space: nowrap;
        overflow: hidden;

        width: ($button_font-size * $button_line-height);
        width: 1lh;
    }

}

.tx-indexedsearch {

    &-info-sword {
        @include stack-spacing();
        display: none;
    }

    &-browsebox {
        @extend .searchResults-panel;

        p {
            @extend %heading;
        }

    }

    &-info-sword + &-browsebox &-browsebox {
        // Hide pagination on top
        display: none;
    }

    &-res {
        @extend .searchResults-item;

        h3 {
            @extend .searchResults-item-title;

            &::after {
                $icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="{{color}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19"/></svg>';
                $size: 24px;

                content: "";

                display: inline-block;
                width: $size;
                height: $size;
                vertical-align: middle;

                position: relative;
                top: -.05em;

                background: svg-url($icon) center center no-repeat;
            }

        }

    }

    // Hide duplicated file names in search results with images
    &-res h3:has(img[src$="jpg.gif"]) ~ &-description {
        display: none;
    }

    &-title {

        a {
            color: inherit;
            text-decoration: none;
            background: none;
        }

    }

    &-icon,
    &-percent {
        display: none !important;
    }

    &-description {
        @extend .searchResults-item-description;
    }

    &-info {
        display: none;
    }

    &-redMarkup {
        @extend .searchResults-marker;
    }

    &-info-noresult {
        @extend .searchResults-placeholder;

        @include only-on-desktop(){
            width: get-columns-width(8);
            margin-left: auto;
            margin-right: auto;
        }

    }

}

ul.tx-indexedsearch-browsebox {
    @extend %paginationBar-list;

    > li {
        @extend %paginationBar-item;

        &.tx-indexedsearch-browselist-currentPage {
            pointer-events: none;

            strong {
                position: absolute;
                inset: 0;
            }

            a {
                position: absolute;
                inset: 0;

                padding: inherit;
                border-radius: inherit;

                color: inherit;
                @include state-styles($paginationBar_link_states, current);
                text-decoration: inherit;
            }

        }

        &.tx-indexedsearch-browselist-prev {
            @extend %paginationBar-item--direction;
            @extend %paginationBar-item--direction--previous;
        }

        &.tx-indexedsearch-browselist-next {
            @extend %paginationBar-item--direction;
            @extend %paginationBar-item--direction--next;
        }

    }

}