/**
 * Minimal styling for the knowledge base search.
 *
 * Deliberately unopinionated: no fonts, no brand colours, no spacing scale. It only
 * does what the suggestion list cannot do without — lift it out of the text flow and
 * make it readable. Canvas/CanvasText follow the page's colour scheme, the greys use
 * alpha so they work on light and dark backgrounds alike. Override freely.
 */

.knowledge__search-form {
    position: relative;
}

.knowledge__suggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: Canvas;
    color: CanvasText;
    border: 1px solid rgba(128, 128, 128, .4);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    max-height: 60vh;
    overflow-y: auto;
}

.knowledge__suggest[hidden] {
    display: none;
}

.knowledge__suggest-item + .knowledge__suggest-item {
    border-top: 1px solid rgba(128, 128, 128, .2);
}

.knowledge__suggest-item a {
    display: block;
    padding: .5em .75em;
    color: inherit;
    text-decoration: none;
}

.knowledge__suggest-item a:hover,
.knowledge__suggest-item a:focus,
.knowledge__suggest-item--active a {
    background: rgba(128, 128, 128, .15);
}

.knowledge__suggest-more {
    border-top: 1px solid rgba(128, 128, 128, .4);
}

.knowledge__suggest-more a {
    font-size: .9em;
    text-decoration: underline;
}