search.sass

.pagefind-ui__toggle, 
.pagefind-ui__button, 
.search__close
    @include button-reset
    @include meta
    box-shadow: none !important
.pagefind-ui__toggle
    @include icon(search, after)
    cursor: pointer
    padding: half($spacing0) $spacing0
    text-align: left
    &::after
        line-height: inherit
        font-size: $body-size-desktop
        margin-left: px2rem(8)
    @include media-breakpoint-down(md)
        border-bottom: 1px solid #adb5bd
        padding: $spacing1 0
        width: 100%
.search__close
    @include icon-block(close, after)
    position: fixed
    right: $spacing3
    z-index: 9
    @include media-breakpoint-down(md)
        right: 0
        top: half($spacing0)
#search
    background: $color-background
    height: 100vh
    left: 0
    padding-bottom: $spacing3
    padding-left: $spacing1
    padding-right: $spacing1
    padding-top: $spacing4
    position: fixed
    overflow: auto
    top: 0
    width: 100vw
    z-index: 80
    @include media-breakpoint-up(md)
        padding-right: $spacing3
        padding-left: $spacing3
        padding-top: $spacing3
    &[aria-hidden=true]
        display: none
    .pagefind-ui
        &::before
            content: ""
            background: $color-background
            height: calc(#{$spacing3} + #{$spacing1} + #{$spacing2} + #{$spacing1})
            width: 100%
            position: fixed
            top: 0
            left: 0
            z-index: 5
            @include media-breakpoint-down(md)
                height: calc(#{$spacing3} + #{half($spacing0)} + #{$spacing4})
        &__form
            @include icon(search, after)
            &::after
                position: absolute
                right: 0
                z-index: 7
        &__search-input
            border-left: 0
            border-right: 0
            border-radius: 0
            border-top: 0
            padding-right: half($spacing1) !important
            position: fixed
            z-index: 6
            @include media-breakpoint-down(md)
                margin-bottom: $spacing1
        &__button[type="button"]
            @include button-reset
            @include link($color-text)
            margin-top: $spacing2
            padding: 0
        &__message
            @include meta
            color: $color-text-alt
            text-align: right
            z-index: 11
            position: fixed
            top: $spacing4
        &__search-clear,
        &__suppressed
            display: none
            pointer-events: none
        &__drawer
            position: relative
        &__result
            list-style: none
            position: relative
            &-thumb
                grid-column: 1/4
                > *
                    aspect-ratio: 3/2
                    object-fit: cover
                @include media-breakpoint-down(md)
                    display: none
            + li
                margin-top: half($spacing3)
            @include media-breakpoint-up(md)
                @include grid
                &-inner
                    grid-column: 4/13
        &__result-excerpt mark
                background-color: $color-accent !important
                color: $color-background !important
        &__result-title a
            @include h4
            @include stretched-link
        @include media-breakpoint-up(md)
            &__form
                position: relative
                width: col(8)
            &__search-input,
            &__message
                width: calc(#{col(8,12)} - #{$spacing3} - #{$spacing1})
            &__results-area
                padding-top: calc(#{$spacing4} - #{$spacing1})
        @include media-breakpoint-down(md)
            &__search-input,
            &__message
                width: calc(100% - #{$spacing2})
            &__message
                top: calc(#{$spacing4} + #{$spacing2})
            &__results-area
                padding-top: calc(#{$spacing3} + #{half($spacing0)})