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
            margin-left: half($spacing0)
    &:not(.pagefind-menu)    
        padding: half($spacing0) $spacing0
    &.toggle-icon::after
        font-size: $h3-size
    &.toggle-both
        .menu & span
            padding-right: 0
    span,
    &::after
        display: inline
    @include media-breakpoint-down(desktop)
        &.pagefind-menu
            padding: $spacing1 0
            width: 100%
    @include media-breakpoint-up(desktop)
        &.toggle-icon::after
            margin-left: 0
.search__close
    @include icon-block(close, after)
    position: fixed
    right: $spacing3
    padding: 0
    z-index: 9
    &::after
        display: inline-flex
        justify-content: center
        margin-left: $spacing0
        width: px2rem(15)
    @include media-breakpoint-down(desktop)
        right: $spacing1
        top: half($spacing0)
#search
    background: $color-background
    color: $color-text
    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(desktop)
        padding-right: $spacing3
        padding-left: $spacing3
        padding-top: space(7)
    &[aria-hidden=true]
        display: none
    a
        color: $color-text
    .pagefind-ui
        &::before
            content: ""
            background: $color-background
            height: space(27)
            left: 0
            position: fixed
            top: 0
            width: 100%
            z-index: 5
            @include media-breakpoint-down(desktop)
                height: space(50)
        &__form
            @include icon(search-inline, after)
            &::after
                color: transparentize($color-text-alt, .4)
                padding-right: px2rem(2)
                position: fixed
                pointer-events: none
                transform: translate(-6px,20%)
                z-index: 9
                @include media-breakpoint-down(desktop)
                    right: $spacing1
                    top: space(33)
        &__search-input
            border-left: 0
            border-right: 0
            border-radius: 0
            border-top: 0
            padding-left: 0
            padding-right: $spacing1 !important
            position: fixed
            z-index: 6
            @include media-breakpoint-down(desktop)
                margin-bottom: $spacing1
            &:focus,
            &:focus-visible
                border-bottom: 2px solid $color-text
                outline: none
        &__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: space(20)
        &__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(desktop)
                    display: none
            + li
                margin-top: half($spacing3)
            @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: col(8)
                &::after
                    left: calc(#{col(8)} - #{space(8)})
                    top: space(9)
            &__search-input,
            &__message
                width: calc(#{col(8,12)} - #{space(21.5)})
            &__results-area
                padding-top: space(26)
        @include media-breakpoint-down(desktop)
            &__search-input,
            &__message
                width: calc(100% - #{$spacing2})
            &__message
                top: space(44)
            &__results-area
                padding-top: space(17)

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

.pagefind-fixed
    align-items: center
    background: $color-background-alt
    bottom: 0
    color: $color-text
    display: flex
    justify-content: space-between
    left: $spacing3
    position: fixed
    z-index: 10
    @include media-breakpoint-up(desktop)
        &:not(.toggle-icon)
            min-width: calc(#{$spacing3} * 3)
        &.toggle-icon:not(:hover)
            padding-left: 0
            padding-right: 0
            justify-content: center
        &.toggle-icon
            min-height: px2rem(37)
            width: px2rem(50)
            &:hover,
            &:focus
                width: calc(#{$spacing3} * 3)
                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: px2rem(44)
            
footer#document-footer .footer-search
    .pagefind-footer
        color: $footer-color
        padding: 0
        &.toggle-icon
            transform: translateX(-35%)
        &::after
            margin-top: px2rem(3)
    #search
        margin-top: 0
        a
            color: $color-text

.nav-search
    display: flex

.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