.overlay {
    background: var(--color-backdrop);
    bottom: 0;
    display: grid;
    height: 100%;
    left: 0;
    place-items: center;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 50
}

dialog.overlay {
    display: none
}

dialog.overlay[open] {
    display: grid
}

.search-dialog {
    display: grid;
}
.search-dialog form {
    width: calc(100% - 3rem);
    max-width: 35rem;
    border-radius: var(--rounded-sm);
}

.search-input {
    border-bottom: 1px solid var(--color-light);
}
.search-input > figure {
    position: absolute;
    top: 0;
    left: 0;
    height: 3rem;
    width: 2.5rem;
}
.search-input input {
    padding: 0 var(--spacing-3) 0 2.5rem;
    height: 3rem;
    width: 100%;
    background: none;
}
.search-input input:focus {
    outline-offset: -2px;
}


.search-result {
    border-bottom: 1px solid var(--color-light);
}
.search-result a {
    display: grid;
    grid-column-gap: var(--spacing-6);
    grid-template-columns: 1fr;
    justify-items: start;
    align-items: start;
    padding: var(--spacing-3) 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result .search-area {
    justify-self: end;
}
.search-result div {
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-footer {
    height: 3rem;
    background: var(--color-gray-200);
    border-bottom-left-radius: var(--rounded-sm);
    border-bottom-right-radius: var(--rounded-sm);
}
.search-footer a {
    padding: 0 var(--spacing-3);
    height: 3rem;
    display: inline-flex;
    align-items: center;
}
.search-footer a svg {
    height: 1rem;
    margin-left: .75rem;
}

.search-result:focus-within,
.search-more:focus-within {
    outline: solid;
    outline: 5px auto -webkit-focus-ring-color;
}