/* ==================
|  Listen
|==================== */

#boardSearch > .inputWrap { display: block; width: 100%; display: grid;
    grid-template-columns: 1fr auto auto; }
#boardSearch > .inputWrap > * { padding: .4em .8em;}

.searchSettings { display: grid; grid-template-columns: auto 1fr auto auto;
    margin-top: .5em; align-items: center;
    font-weight: bold; }
.searchSettings > * { vertical-align: middle; }

#objFoundCount { font-weight: 900; }

#searchButtons { padding: 0 .5em; }
.searchComp:hover { z-index: 22; }
.searchComp { display: inline-block; width: auto;
    background: var(--color-bg2); border-radius: var(--def-border-radius); }
.searchComp > * { display: inline-block; padding: .3em .3em; }
.searchButtons .searchField { color: var(--color-fg2); }
.searchButtons .searchField:after { content: ":"; }
.searchRm { cursor: pointer; transition: background .2s; }
.searchRm:hover { background: var(--color-accent-focus); }

#searchExtensionTrigger img { height: 1em; width: 1em; margin-bottom: -.2em; }

#searchExtensionTrigger { margin: .0em .5em; }
#searchExtensionTrigger,
#searchSortTrigger { cursor: pointer; padding: .3em .5em; background: var(--color-bg2); }

#searchExtensionTrigger img,
#searchSortTrigger:before { margin-right: .5em; }

@media screen and (max-width: 1024px) {
    .searchSettings { grid-template-columns: 1fr repeat(3, auto); }
    .searchSettings #searchButtons { grid-column: 1 / span 4; grid-row: 2; }
    #searchExtensionTrigger span,
    #searchSortTrigger span { display: none; }
}