.search-overlay {
    pointer-events: none;
}

.search-overlay.show {
    pointer-events: initial;
}

.search-overlay .backdrop {
    opacity: 0;
    transition-property: opacity;
}

.search-overlay.show .backdrop {
    opacity: 0.85;
}

.overlay-search-form-container {
    --overlay-search-form-bg: var(--color-tint);
    --overlay-search-form-input-height: 38px;

    background: var(--overlay-search-form-bg);
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    transition-property: opacity, transform;
    transform: translateY(-10px);
    opacity: 0;
}

.search-overlay.show .overlay-search-form-container {
    transform: translateY(0);
    opacity: 1;
}

.overlay-search-form-container p {
    margin-bottom: 8px;
}

.overlay-search-form {
    --overlay-search-form-input-bg: var(--color-tint);
    --overlay-search-form-input-placeholder: var(--color-contrast-tint-40);
}

.overlay-search-form input {
    border: 2px solid var(--color-contrast-tint-40);
    background: var(--overlay-search-form-input-bg);
    border-radius: 6px;
    height: var(--overlay-search-form-input-height);
    margin-right: 14px;
    padding-left: 16px;
    padding-right: 16px;
}

.overlay-search-form input::placeholder {
    color: var(--overlay-search-form-input-placeholder);
}

.overlay-search-form button {
    --overlay-search-form-color: var(--color-contrast-tint-40);
    --overlay-search-form-bg-color: var(--color-tint);

    background: var(--overlay-search-form-bg-color);
    border-radius: 21px;
    border: 2px solid var(--color-contrast-tint-40);
    color: var(--overlay-search-form-color);
    min-width: 80px;
    height: var(--overlay-search-form-input-height);
    font-weight: 700;
}

.overlay-search-form button:hover,
.overlay-search-form button:focus {
    --overlay-search-form-color: var(--color-tint);
    --overlay-search-form-bg-color: var(--color-contrast-tint-40);
}

@media (prefers-color-scheme: dark) {
    .overlay-search-form-container {
        --overlay-search-form-bg: var(--color-contrast-shade-40);
    }

    .overlay-search-form {
        --overlay-search-form-input-bg: var(--color-tint-shadow-50);
        --overlay-search-form-input-placeholder: var(--color-tint);
    }
}