:root {
    --search-pane-header-height: 22px;
    --search-pane-search-height: 35px;
    --search-pane-padding: 10px;
}

.search-pane {
    color: var(--whispr-white);

    position: absolute;
    top: 7px;
    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;

    padding-left: var(--search-pane-padding);
}

.search-pane .search-container {
    min-height: var(--search-pane-search-height);
}

.search-pane .search-container input {
    width: calc(100% - 2em);
}

.search-pane .search-container i {
    color: var(--whispr-dark-grey);
}

.search-pane-header {
    height: var(--search-pane-header-height);
    font-weight: bold;
    font-size: 120%;
}

.search-pane-search-results {
    color: var(--whispr-light-grey);
    margin-top: var(--search-pane-padding);
    overflow-y: auto;
}

.search-pane-search-results-document {
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
}

.search-pane-search-results-document-name:hover {
    color: var(--whispr-dark-grey);
    background-color: var(--whispr-white);
}

.search-pane-search-result {
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    padding-left: var(--search-pane-padding);
    margin-left: 2px;
    border-left: 1px solid var(--whispr-dark-grey);
}

.search-pane-search-result:hover {
    color: var(--whispr-dark-grey);
    background-color: var(--whispr-white);
}

.search-pane-search-result.selected {
    color: var(--whispr-white);
    background-color: var(--whispr-dark-red);
}