search.sass

.pagefind-ui__toggle, 
.pagefind-ui__button, 
.search__close
    @include button-reset
    @include meta
    &:focus
        box-shadow: none
.pagefind-ui__toggle:not(.pagefind-menu), 
.pagefind-ui__button, 
.search__close
    @include meta
.pagefind-ui__toggle
    color: $header-color
    cursor: pointer
    text-align: left
    box-shadow: none
    &:not(.toggle-text)
        @include icon(search-inline, after)
        &::after
            line-height: inherit
            margin-left: $spacing-1
    &:not(.pagefind-menu)    
        padding: $spacing-1 $spacing-2
    &.toggle-icon::after
        font-size: $h3-size
        @include media-breakpoint-up(desktop)
            margin-top: pxToRem(5)
    span,
    &::after
        display: inline
    @include media-breakpoint-down(desktop)
        &.pagefind-menu
            padding: $spacing-3 0
            width: 100%
    @include media-breakpoint-up(desktop)
        &.toggle-icon::after
                margin-left: 0
.search__close
    @include icon-block(close, after)
    position: fixed
    right: $spacing-5
    padding: 0
    z-index: 9
    &::after
        display: inline-flex
        justify-content: center
        margin-left: $spacing-2
        width: pxToRem(15)
    @include media-breakpoint-down(desktop)
        right: $spacing-3
        top: $spacing-1
#search
    background: $color-background
    color: $color-text
    height: 100vh
    left: 0
    padding-bottom: $spacing-5
    padding-left: var(--grid-gutter)
    padding-right: var(--grid-gutter)
    padding-top: $spacing-6
    position: fixed
    overflow: auto
    top: 0
    width: 100vw
    z-index: 80
    @include media-breakpoint-up(desktop)
        padding-top: $spacing-4
    &[aria-hidden=true]
        display: none
    a
        color: $color-text
    .pagefind-ui
        &::before
            content: ""
            background: $color-background
            height: space(34)
            left: 0
            position: fixed
            top: 0
            width: 100%
            z-index: 5
            @include media-breakpoint-down(desktop)
                height: space(52)
        &__form
            @include icon(search-inline, after)
            &::after
                color: transparentize($color-text-alt, .4)
                position: fixed
                pointer-events: none
                z-index: 9
                font-size: $h2-size
                @include media-breakpoint-down(desktop)
                    right: $spacing-3
                    top: space(35)
        &__search-input
            border-left: 0
            border-right: 0
            border-radius: 0
            border-top: 0
            padding-left: 0
            padding-right: $spacing-3 !important
            position: fixed
            z-index: 6
            &:focus,
            &:focus-visible
                border-bottom: 2px solid $color-text
                outline: none
        &__button[type="button"]
            @include button-reset
            @include link($color-text)
            margin-top: $spacing-4
            padding: 0
        &__message
            @include meta
            color: $color-text-alt
            text-align: right
            z-index: 11
            position: fixed
            top: space(27)
        &__search-clear,
        &__suppressed
            display: none
            pointer-events: none
        &__drawer
            position: relative
            @include media-breakpoint-down(desktop)
                padding-top: $spacing-2
        &__result
            list-style: none
            position: relative
            &-thumb
                grid-column: 1/4
                > *
                    aspect-ratio: 3/2
                    object-fit: cover
                @include media-breakpoint-down(desktop)
                    display: none
            + li
                margin-top: $spacing-4
            @include media-breakpoint-up(desktop)
                @include grid
                &-inner
                    grid-column: 4/13
        &__result-excerpt mark
                background-color: $color-accent
                color: $color-background
        &__result-title a
            @include h4
            @include stretched-link
        @include media-breakpoint-up(desktop)
            &__form
                position: relative
                width: columns(8)
                &::after
                    left: calc(#{columns(8)} + #{var(--grid-gutter)})
                    top: space(16)
                    transform: translateX(-100%)
            &__search-input,
            &__message
                width: columns(8)
            &__results-area
                padding-top: $spacing-6
        @include media-breakpoint-down(desktop)
            &__search-input,
            &__message
                left: var(--grid-gutter)
                right: var(--grid-gutter)
            &__message
                top: space(46)
            &__results-area
                padding-top: space(17)

.menu .nav-level-1 > li .pagefind-ui__toggle:not(.toggle-icon)::after
    margin-left: 0
    margin-top: pxToRem(2)

.pagefind-fixed
    align-items: center
    background: $color-background-alt
    bottom: 0
    color: $color-text
    display: flex
    justify-content: space-between
    left: var(--grid-gutter)
    position: fixed
    z-index: 10
    @include media-breakpoint-up(desktop)
        &:not(.toggle-icon)
            min-width: columns(2)
        &.toggle-icon:not(:hover)
            padding-left: 0
            padding-right: 0
            justify-content: center
        &.toggle-icon
            min-height: pxToRem(37)
            width: pxToRem(50)
            span
                display: none
            &:hover,
            &:focus
                min-width: columns(2)
                span
                    display: inline
    @include media-breakpoint-down(desktop)
        left: 0
        width: 100vw
        &.in-page-with-toc
            background: $color-background
            border-top: 1px solid #eee
            bottom: pxToRem(44)
            
footer#document-footer .footer-search
    .pagefind-footer
        color: $footer-color
        padding: 0
        &.toggle-icon
            transform: translateX(-35%)
        &::after
            margin-top: pxToRem(3)
    #search
        margin-top: 0
        a
            color: $color-text

.nav-search
    display: flex
    .pagefind-menu:not(.toggle-icon)::after
        margin-top: 10px

.menu .nav-level-1 > li .pagefind-ui__toggle span
    display: inline
@include media-breakpoint-up(desktop)
    .menu .nav-level-1 > li .pagefind-ui__toggle.toggle-icon span
        display: none