FHC-Core/public/css/components/searchbar/searchbar.css

/* 
    Created on : Jun 15, 2022, 3:21:25 PM
    Author     : bambi
*/

@import url(./switches.css);

:root{
	--fhc-searchbar-shadow: var(--fhc-shadow-40, #ced4da);
	--fhc-searchbar-settings-background-color: var(--fhc-dark, #343a40);
	--fhc-searchbar-results-background-color: var(--fhc-background, #fff);
	--fhc-searchbar-results-border-color: var(--fhc-border, lightgrey);
	--fhc-searchbar-results-link-color: var(--fhc-link, #0d6efd);
	--fhc-searchbar-results-btn-color: var(--bs-btn-color, white);
}

.searchbar_input_clear {
	/* 1rem * 5 / 8 = width of icon */
	margin-inline-start: calc(-1rem * 5 / 8 - var(--bs-btn-padding-x) * 2 - var(--bs-border-width)) !important;
	border: 0;
	margin-inline-end: 1px;
	z-index: 1;
}
.searchbar_input_clear:hover,
.searchbar_input_clear:focus {
	color: var(--bs-body-color);
	background-color: transparent;
}
.searchbar_input:focus,
.searchbar_input:focus ~ .searchbar_input_clear {
	z-index: 5; /* same as bootstrap .input-group > .form-control:focus */
}

.searchbar_setting_btn {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-bg: var(--bs-tertiary-bg);
	--bs-btn-border-color: var(--bs-border-color);
}


.searchbar_searchbox.open {
	z-index: 10000;
}


.searchbar_settings {
	position: absolute; 
    z-index: 9999; 
    background-color: var(--fhc-searchbar-settings-background-color);
}

.searchbar_results {
    position: absolute; 
    z-index: 9998; 
    background-color: var(--fhc-searchbar-results-background-color);
    border: 1px solid var(--fhc-searchbar-results-border-color);
    padding: .5rem;
    top: 100%;
    width: 100%;
    left: 0;
    right: 0;
	box-shadow: 2px 2px 4px var(--fhc-searchbar-shadow);
}

.searchbar_results a{
	color: var(--fhc-searchbar-results-link-color);
}
/*
.searchbar_results a:not(a~i) {
	color: inherit;
}
*/
.searchbar_results a.btn {
	color: var(--fhc-searchbar-results-btn-color);
}

.searchbar_results_scroller {
    overflow-y: auto;
	overscroll-behavior: none;
}

.searchbar_result {
    border-bottom: 1px solid var(--fhc-searchbar-results-border-color);
    margin-bottom: 1rem;
}

.searchbar_grid {
    display: grid;
    grid-template-columns: [icon] 100px [data] auto;
}

.searchbar_icon {
    grid-column-start: icon;
    grid-column-end: span 1;
    margin-right: .75em;
}

.searchbar_data {
    grid-column-start: data;
    grid-column-end: span 1;
}

.searchbar_actions {
    display: flex;
    padding: 0;
    margin-top: 1rem;
}

.searchbar_actions li {
    list-style: none;
    text-align: center;
    padding: 3px;
}

.searchbar_table {
    display: table;
}

.searchbar_tablerow {
    display: table-row;
}

.searchbar_tablecell {
    display: table-cell;
    min-width: 175px;
    padding: 0 6px;
}

.searchbar_settings_types {
    display: flex;
    padding: 0;
}

.searchbar_settings_types li {
    list-style: none;
    padding: 5px;
}

.searchbar_settings_types li label {
    padding: 3px;
}

.searchbar_inline_ul {
    margin: 0;
    padding: 0;
}

.searchbar_inline_ul li {
    list-style: none;
}

/* new variant with template/frame */

.searchbar-result-template-frame {
	border-bottom: 1px solid lightgrey;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.searchbar-result-template-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
	margin: 1rem 0 0;
}

.searchbar-square-image {
	position: relative;
	display: block;
	height: 0;
	padding-bottom: 100%;
}
.searchbar-square-image > * {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.searchbar-square-image > img {
	object-fit: cover;
}
.searchbar-square-image > div {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: rgba(var(--bs-white-rgb),1);
	background-color: rgba(var(--bs-primary-rgb), 1);
}
.searchbar-square-image.rounded-circle > img,
.searchbar-square-image.rounded-circle > div {
	border-radius: 50%;
}

.searchbar-rounded-image {
	display: block;
	width: 100%;
}
.searchbar-rounded-image > img {
	width: 100%;
}
.searchbar-rounded-image > div {
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: rgba(var(--bs-white-rgb),1);
	background-color: rgba(var(--bs-primary-rgb), 1);
	height: calc((100px - .75em) * 1.3);
}
.searchbar-rounded-image > img,
.searchbar-rounded-image > div {
	border-radius: .25rem;
}

.no-margin-paragraphs p {
	margin: 0;
}

.non-selectable {
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
  }

.searchbar_inaktiv {
	opacity: .6;
}