/* Search suggestion presentation uses the same fields, colors and corners as the blog. */


.mb-search-suggestions {


    position: relative;


    flex: 1 1 0;


    min-width: 0;


    max-width: 100%;


}


.search-panel .mb-search-suggestions input,


.search-form .mb-search-suggestions input,


.msk-not-found .search-form .mb-search-suggestions input {


    box-sizing: border-box;


    width: 100%;


    min-width: 0;


}


.mb-search-suggestions .mb-search-suggestions-list {


    position: absolute;


    z-index: 50;


    top: calc(100% + 6px);


    inset-inline: 0;


    max-height: min(26rem, 50dvh);


    margin: 0;


    padding: 0;


    overflow-y: auto;


    overscroll-behavior: contain;


    list-style: none;


    border: 1px solid var(--msk-line, #dedee5);


    border-radius: 5px;


    background: var(--msk-paper, #fff);


    color: var(--msk-ink, #15172b);


    box-shadow: 0 12px 28px #15172b1f;


    font: 400 14px/1.5 var(--msk-sans, Montserrat, Arial, sans-serif);


    text-align: left;


}


.mb-search-suggestions .mb-search-suggestions-list[hidden] { display: none !important; }


.mb-search-suggestions-list > li { margin: 0; padding: 0; border-bottom: 1px solid var(--msk-line, #dedee5); }


.mb-search-suggestions-list > li:last-child { border-bottom: 0; }


.mb-search-suggestions-list .msk-search-suggestion-link {


    display: grid;


    grid-template-columns: minmax(0, 1fr) auto;


    align-items: center;


    gap: 3px 14px;


    min-height: 56px;


    padding: 11px 13px;


    color: var(--msk-ink, #15172b);


    text-decoration: none;


    overflow-wrap: anywhere;


}


.mb-search-suggestions-list .msk-search-suggestion-link:hover,


.mb-search-suggestions-list > .is-active > .msk-search-suggestion-link {


    background: #f9edf3;


    color: var(--msk-magenta, #cf0063);


    text-decoration: none;


}


.mb-search-suggestions-list .msk-search-suggestion-link:focus-visible { outline: 2px solid var(--msk-magenta, #cf0063); outline-offset: -3px; }


.mb-search-suggestions-list .msk-search-suggestion-name { font-size: 14px; font-weight: 600; line-height: 1.5; }


.mb-search-suggestions-list .msk-search-suggestion-meta { color: var(--msk-muted, #626575); font-size: 12px; font-weight: 400; line-height: 1.5; }


.mb-search-suggestions-list .msk-search-suggestion-copy {


    display: grid;


    gap: 3px;


    min-width: 0;


}


.mb-search-suggestions-list .msk-search-suggestion-activity {


    display: flex;


    flex-wrap: wrap;


    align-items: center;


    justify-content: flex-end;


    gap: 6px 9px;


    max-width: 158px;


    color: var(--msk-muted, #626575);


    font-size: 12px;


    line-height: 1.4;


    font-weight: 400;


    font-variant-numeric: tabular-nums;


}


.mb-search-suggestions-list .msk-search-suggestion-count {


    display: inline-flex;


    align-items: center;


    gap: 4px;


    white-space: nowrap;


}


.mb-search-suggestions-list .msk-search-suggestion-count svg {


    display: block;


    width: 13px;


    height: 13px;


    flex: 0 0 13px;


}


.mb-search-suggestions-list > .msk-search-suggestion-search-all-item {


    border-top: 1px solid var(--msk-line, #dedee5);


    background: #fff8fb;


}


.mb-search-suggestions-list .msk-search-suggestion-search-all {


    display: block;


    min-height: 44px;


    padding: 12px 13px;


    color: var(--msk-magenta, #cf0063);


    font-size: 13px;


    font-weight: 600;


}


.mb-search-suggestions-list .msk-search-suggestion-search-all:hover,


.mb-search-suggestions-list > .is-active > .msk-search-suggestion-search-all {


    background: #f9edf3;


    color: #af0054;


}


@media (max-width: 700px) {


    .search-panel .mb-search-suggestions { flex-basis: 100%; width: 100%; }


    .mb-search-suggestions input { font-size: 16px; }


    .mb-search-suggestions .mb-search-suggestions-list { max-height: min(23rem, 45dvh); }


}


@media (max-width: 440px) {


    .mb-search-suggestions-list .msk-search-suggestion-link { column-gap: 10px; }


    .mb-search-suggestions-list .msk-search-suggestion-activity { max-width: 92px; gap: 6px 8px; }


}