/**
 * @file: collection-renderer.core.css
 * @desc: Contains CSS that applies to all (default) views based on collections
 */

/**
 * Layout of search bar (SearchBar component)
 */

.collection-renderer .pbuic-search-bar {
    position: relative;
}

.collection-renderer .pbuic-search-bar label {
	position: absolute;
	height: 1px;
	width: 1px;
	clip-path: inset(100%);
	clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	white-space: nowrap;
}

.collection-renderer .pbuic-search-bar button {
	position: absolute;
	left: 0;
	top: 0;
    width: 28px;
    height: 28px;
    border: none;
    font-size: 0;
    text-align: center;
    line-height: 1;
    opacity: 0.7;
    background: url(img/icons/search-icon.svg) no-repeat 50%;
    background-size: 12px;
    box-shadow: none;
}

.collection-renderer .pbuic-search-bar input:focus + button,
.collection-renderer .pbuic-search-bar input:hover + button,
.collection-renderer .sb-contains-query button {
	opacity: 1;
}

.collection-renderer .pbuic-search-bar button:hover {
	box-shadow: none;
}

.collection-renderer .pbuic-search-bar input {
    width: 100%;
	padding-left: 28px;
    border: none;
	text-indent: 0;
	color: #000;
	background: rgba(255, 255, 255, 0.8);
    outline: none;
    cursor: inherit;
    box-sizing: border-box;
}

.collection-renderer .pbuic-search-bar input:focus,
.collection-renderer .pbuic-search-bar input:hover,
.collection-renderer .sb-contains-query input {
    background-color: #fff;
}