@keyframes sa-global-search-content-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sa-global-search-logo-in {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes sa-global-search-close-in {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sa-global-navigation {
    .search {
        width: 100%;
        height: 100dvh;
        max-width: none;
        max-height: none;
        inset: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        background: var(--color-surface-neutral-2, #f3f4f6);
        color: var(--color-text, #000b3c);
        opacity: 0;
        transform: translateX(32px);
        transition:
            opacity 180ms ease,
            transform 180ms ease,
            display 180ms allow-discrete,
            overlay 180ms allow-discrete;

        &[open] {
            opacity: 1;
            transform: translateX(0);
        }

        &::backdrop {
            background-color: rgb(0 0 0 / 25%);
            backdrop-filter: blur(3px);
            opacity: 0;
            transition:
                opacity 180ms ease,
                display 180ms allow-discrete,
                overlay 180ms allow-discrete;
        }

        &[open]::backdrop {
            opacity: 1;
        }
    }

    .search-layout {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-rows: auto minmax(0, 1fr);
        place-content: center;
        gap: 16px;
        height: 100%;
        /* padding: 0 var(--container-padding-md); */
        /* padding: max(8px, env(safe-area-inset-top)) max(var(--container-padding-md), env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(var(--container-padding-md), env(safe-area-inset-left)); */
    }

    .search-mobile-header-background {
        background-color: var(--color-white);
        width: 100%;
        min-height: var(--bar-height);
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        padding: 8px var(--container-padding-md) 0;
    }

    .search-brand {
        align-self: center;
        display: flex;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin-left: 16px;

        @media (min-width: 48rem) {
            margin-left: 0;
        }
    }

    .search-brand .sa-logo {
        /* width: 165px; */
        /* height: 26px; */
    }

    .search-brand .sa-logo-symbol {
        display: none;
        width: 33px;
        height: 32px;
    }

    .search-close {
        align-self: center;
        grid-column: 2;
        grid-row: 1;
        justify-content: center;
        justify-self: end;
        width: 44px;
        height: 44px;
        border-color: var(--color-neutral-800, #000b3c);
        border-radius: 50%;
        margin-right: 16px;

        @media (min-width: 48rem) {
            margin-left: 0;
        }
    }

    .search-close .search-close-label {
        display: none;
    }

    [data-sa-global-navigation-search-mount] {
        min-height: 0;
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 0 var(--container-padding-md) 8px;

        @media (min-width: 48rem) {
            padding: 0;
        }
    }

    .search-component,
    .search-form {
        height: 100%;
        min-height: 0;
    }

    .search-label {
        display: block;
        margin-block-end: 8px;
        font-family: var(--font-secondary, sans-serif);
        font-size: var(--font-size-label-md, 16px);
        font-weight: 600;
    }

    .search-field {
        display: flex;
        gap: 8px;
        min-height: 56px;
        align-items: center;
        border: 1px solid var(--color-border-neutral, #7f859d);
        border-radius: 12px;
        background: var(--color-white, #fff);
        box-shadow: var(--shadow-xs, 0 2px 6px rgb(13 10 44 / 8%));
        color: var(--color-text, #000b3c);
        transition: box-shadow 180ms ease;

        &:focus-within {
            box-shadow: 0 0 0 3px var(--color-neutral-100, #ccced8);
        }
    }

    .search-field-icon {
        display: grid;
        flex: 0 0 16px;
        padding-left: 8px;
        place-items: center;
    }

    .search-input {
        min-width: 0;
        height: 100%;
        flex: 1 1 auto;
        border: 0;
        outline: 0;
        background: transparent;
        color: inherit;
        font: inherit;

        &::placeholder {
            color: var(--color-text-muted, #404869);
            opacity: 1;
        }

        &::-webkit-search-cancel-button {
            display: none;
        }
    }

    .search-clear {
        display: grid;
        flex: 0 0 40px;
        height: 40px;
        place-items: center;
        border: 0;
        background: transparent;
        color: inherit;

        span {
            display: flex;
        }

        &[hidden] {
            display: none;
        }
    }

    .search-submit {
        display: none;
        /* min-width: 64px; */
        height: 44px;
        margin-inline-end: 4px;
        padding-inline: 16px;
        border: 0;
        border-radius: 999px;
        background: var(--color-neutral-800, #000b3c);
        color: var(--color-white, #fff);
        font-family: var(--font-secondary, sans-serif);
        font-weight: 600;

        &:hover {
            background: var(--color-neutral-600, #293256);
        }
    }

    .search-component.has-query .search-field-icon {
        display: none;
    }

    .search-component.has-query .search-input {
        padding-inline-start: 12px;
    }

    .search-component.has-query .search-submit {
        display: block;
    }

    .search-suggestions {
        height: calc(100% - 80px);
        margin-block-start: 32px;
        overflow-y: auto;
        overscroll-behavior: contain;

        &[hidden] {
            display: none;
        }
    }

    .search-group {
        margin-block-end: 32px;

        &[hidden] {
            display: none;
        }
    }

    .search-group-title {
        margin: 0 0 12px;
        padding-inline: 12px;
        font-family: var(--font-secondary, sans-serif);
        font-size: var(--font-size-label-sm, 14px);
        font-weight: 600;
    }

    .search-options {
        display: grid;
        justify-items: stretch;
    }

    .search-option {
        display: flex;
        width: 100%;
        min-height: 36px;
        align-items: center;
        padding: 6px 12px;
        border-radius: 8px;
        color: var(--color-text-link, #730bda);
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
        transition: background-color 140ms ease-out;

        .search-option-label {
            text-decoration: underline;
            text-decoration-thickness: 7%;
            text-underline-position: from-font;
        }

        .search-option-icon {
            display: flex;
            margin-inline-start: auto;
            color: var(--color-text, #000b3c);
            opacity: 0;
        }

        &:hover,
        &:focus-visible,
        &.is-active {
            background: var(--color-neutral-50, #ebecf0);
            color: var(--color-text, #000b3c);
        }

        &:is(:hover, :focus-visible, .is-active) .search-option-icon {
            opacity: 1;
        }
    }

    .search-empty,
    .search-error {
        margin: 0;
        color: var(--color-text-muted, #404869);
    }

    @media (min-width: 48rem) {
        .search {
            background: transparent;
            transform: translateY(0);

            &[open] {
                transform: translateY(0);
            }

            &::before {
                position: fixed;
                z-index: 0;
                inset: 0 0 auto;
                height: var(--bar-height);
                background: var(--color-white, #fff);
                content: "";
            }

            &::backdrop {
                background: linear-gradient(to bottom,
                        transparent 0 var(--bar-height),
                        rgb(0 0 0 / 30%) var(--bar-height));
                backdrop-filter: blur(3px);
            }
        }

        .search-layout {
            grid-template-columns: minmax(max-content, 1fr) minmax(0, 600px) minmax(max-content, 1fr);
            grid-template-rows: auto;
            height: auto;
            min-height: var(--bar-height);
            padding: 0 var(--container-padding-md);
        }

        .search-brand {
            grid-column: 1;
            grid-row: 1;
        }

        .search-brand .sa-logo {
            display: none;
        }

        .search-brand .sa-logo-symbol {
            display: block;
        }

        .search-close {
            grid-column: 3;
            grid-row: 1;
            width: auto;
            height: 40px;
            padding-inline: 12px;
            border-radius: 999px;
        }

        .search-close-label {
            font-weight: 600;
        }

        .search-close .search-close-label {
            display: inline;
        }

        [data-sa-global-navigation-search-mount] {
            position: relative;
            align-self: center;
            grid-column: 2;
            grid-row: 1;
        }

        .search[open] [data-sa-global-navigation-search-mount] {
            animation: sa-global-search-content-in 160ms ease-out 180ms both;
        }

        .search[open] .search-brand {
            animation: sa-global-search-logo-in 160ms ease-out 280ms both;
        }

        .search[open] .search-close {
            animation: sa-global-search-close-in 160ms ease-out 280ms both;
        }

        .search-component,
        .search-form {
            height: auto;
        }

        .search-label {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        .search-field {
            min-height: 48px;
            border-radius: 8px;
        }

        .search-submit {
            display: block;
            height: 40px;
        }

        .search-suggestions {
            position: absolute;
            inset: 100% 0 auto;
            width: 100%;
            height: auto;
            max-height: calc(100dvh - var(--bar-height) - 32px);
            margin-block-start: 16px;
            padding: 24px;
            border-radius: 16px;
            background: var(--color-white, #fff);
            box-shadow: var(--shadow-card, 0 5px 10px rgb(0 11 60 / 10%));
        }

        .search-group {
            margin-block-end: 24px;

            &:last-child {
                margin-block-end: 0;
            }
        }

        .search-component:not(.has-query) .search-field-icon {
            display: none;
        }

        .search-component:not(.has-query) .search-input {
            padding-inline-start: 12px;
        }
    }

    @media (min-width: 80rem) {
        .search-layout {
            grid-template-columns: minmax(max-content, 1fr) minmax(0, 900px) minmax(max-content, 1fr);
        }

        .search-brand .sa-logo {
            display: block;
            width: auto;
            height: auto;
        }

        .search-brand .sa-logo-symbol {
            display: none;
        }
    }
}

@starting-style {
    .sa-global-navigation .search[open] {
        opacity: 0;
        transform: translateX(32px);

        @media (min-width: 48rem) {
            transform: translateY(-16px);
        }
    }

    .sa-global-navigation .search[open]::backdrop {
        opacity: 0;
    }
}

html.sa-global-search-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    .sa-global-navigation .search,
    .sa-global-navigation .search-field,
    .sa-global-navigation .search::backdrop {
        transition: none;
    }

    .sa-global-navigation .search[open] :is(.search-brand, .search-close, [data-sa-global-navigation-search-mount]) {
        animation: none;
    }

    .sa-global-navigation .search-option {
        transition: none;
    }
}