.search-popup {
    background-color: $color-shade-lightest;
    display: flex;
    justify-content: center;
    left: 0;
    padding: $spacing-lg;
    position: fixed;
    top: 0;
    transform: translateY(-100%);
    transition: $transition-default;
    transition-delay: 0.2s;
    width: 100%;
    z-index: $z-index-search-popup;

    @include media-breakpoint-up(sm) {
        padding: $spacing-xl 0 $spacing-xxl;
    }

    @include media-breakpoint-up(sm) {
        padding: $spacing-xxl 0 $spacing-xxl;
    }
}

.search-form {
    .form-group {
        position: relative;

        @include media-breakpoint-down(sm) {
            flex-grow: 1;
        }
    }
}

.search-popup__title {
    @include media-breakpoint-up(sm) {
        margin-bottom: $spacing-lg;
    }
}

.search-popup__wrapper {
    text-align: center;

    .form-wrapper {
        align-items: center;
        display: flex;
        gap: $spacing-sm;
        margin-bottom: $spacing-md;

        @include media-breakpoint-up(sm) {
            gap: $spacing-lg;
        }
    }
}

.search-popup__heading {
    display: flex;
    justify-content: space-between;
}

.search-input {
    border: 1px solid $color-primary;
    flex: 1;
    height: 38px;
    padding: $spacing-md $spacing-lg;
    width: 100%;

    @include media-breakpoint-up(sm) {
        width: 440px;
    }

    @include media-breakpoint-up(md) {
        height: 48px;
        width: 580px;
    }

    @include media-breakpoint-up(lg) {
        height: 56px;
        width: 685px;
    }
}

.search-button {
    @include media-breakpoint-down(sm) {
        height: 38px;
    }
}

.js-search-preview-results {
    @include media-breakpoint-down(sm) {
        font-size: $font-size-sm;
    }
}

.search-popup-bg {
    background-color: rgba($color: $color-secondary-dark-active, $alpha: 0.6);
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: $transition-default;
    visibility: hidden;
    width: 100%;
    z-index: $z-index-search-popup-bg;
}

.search-popup__link-container {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-md;
    padding: 0;
}

.search-popup__list {
    list-style: none;
    width: calc(50% - $spacing-md/2);
}

.search-popup__link {
    border-bottom: 1px solid $color-primary;
    box-shadow: 0 0 1px 1px rgba($color-shade-darkest, 0.2);
    display: block;
    padding: $spacing-md;
}

.open-search {
    @at-root body#{&} {
        height: 100dvh;
        overflow: hidden;
        position: relative;
    }

    .search-popup {
        transform: translateY(0);
    }

    .search-popup-bg {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
    }
}
