.downloads-search {
    display: grid;
    grid-template-columns: 36rem 1fr 12rem;
    gap: 1.25rem;
    margin: 3.5rem 0
}

.downloads-search input,
.downloads-search select {
    border: 1px solid var(--line);
    border-radius: .625rem;
    padding: .75rem 1.25rem;
    min-width: 0;
    height: 3.75rem;
    font-size: 1.25rem;
    background: #fff;
    color: var(--ink)
}

.downloads-search input,
.downloads-search select {
    outline: none;
    box-shadow: none;
}

.downloads-grid .publication-card__download {
    opacity: 0
}

.downloads-grid .publication-card button:hover .publication-card__download {
    opacity: 1
}

@media(max-width:640px) {
    .downloads-search {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 24px 0
    }

    .downloads-search input,
    .downloads-search select {
        height: 44px;
        font-size: 13px;
        padding: 10px
    }

    .downloads-search input {
        grid-column: 1/-1;
        grid-row: 2
    }

    .downloads-search button {
        grid-column: 2;
        grid-row: 1;
        min-width: 0
    }
}

#download-brand {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url(../img/common/site-nav-toggle-background.svg) right 1.25rem center/14px 14px no-repeat;
    padding-right: 3rem;
    cursor: pointer
}

.downloads-search :is(input, select):focus-visible {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px #4393a018
}

.downloads-search-status {
    min-height: 1.6em;
    margin: -2rem 0 2rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 12px
}

.downloads-search-status:empty {
    display: none
}

.downloads-search-status[data-state=loading]:before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #d7e3e6;
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: download-spin 800ms linear infinite
}

.downloads-search-status[data-state=error] {
    color: var(--form-error)
}

.downloads-search-status button {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 4px
}

.downloads-grid {
    transition: opacity 220ms ease
}

.downloads-grid[aria-busy=true] {
    opacity: .4;
    pointer-events: none
}

@keyframes download-spin {
    to {
        transform: rotate(360deg)
    }
}

@media(max-width:640px) {
    #download-brand {
        background-position: right 12px center;
        padding-right: 34px;
        background-size: 12px
    }

    .downloads-search-status {
        margin: -12px 0 24px;
        font-size: 12px
    }
}