/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.has-background {
	padding: calc(var(--space-xs) * 0.5) var(--space-s) !important;
}


/*** base ***/
.has-base-color {
	color: var(--base-dark);
}

.has-base-light-color {
	color: var(--base-ultra-light);
}

.has-base-background-color {
	background: var(--base-dark);
}

.has-base-light-background-color {
	background: var(--base-ultra-light);
}

/*** primary ***/
.has-primary-color {
	color: var(--primary);
}

.has-primary-light-color {
	color: var(--primary-ultra-light);
}

.has-primary-background-color {
	background: var(--primary);
}

.has-primary-light-background-color {
	background: var(--primary-ultra-light);
}

/*** accent ***/
.has-accent-color {
	color: var(--accent);
}

.has-accent-light-color {
	color: var(--accent-ultra-light);
}

.has-accent-background-color {
	background: var(--accent);
}

.has-accent-light-background-color {
	background: var(--accent-ultra-light);
}

/*** danger ***/
.has-danger-color {
	color: var(--danger-dark);
}

.has-danger-light-color {
	color: var(--danger-light);
}

.has-danger-background-color {
	background: var(--danger-dark);
}

.has-danger-light-background-color {
	background: var(--danger-light);
}


/*** search functionality ***/

.search_result {
	position: absolute;
	top: 100%;
	top: calc(100% + 20px);
	right: 0;
	border: 1px solid #dddd;
	background: #fff;
	width: 500px;
	max-width: 500px;
	transition: all 2s ease 0s;
	z-index: 11;
	height: 500px;
	overflow-y: auto;
	overflow-wrap: break-word;
}

.search_result ul {
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.search_result ul li img {
	max-width: 40px;
}

.search__card {
	display: flex;
	flex-direction: column;
	font-size: var(--text-m);
	padding: var(--space-s);
	gap: 10px;
}

.search__content {
	margin-top: -8px;
	justify-content: baseline;
	font-size: var(--text-xs);
}

.search__accent {
	width: fit-content;
	font-size: var(--text-2xs);
	background: var(--base);
	color: white;
	padding: .3em .6em .2em;
	border-radius: 6px;
}

.brxe-live-search {
	z-index: 99;
	position: absolute;
	top: 50%;
	bottom: 0;
	right: 35px;
	width: auto;

	height: 50px;
	background: var(--primary);
	display: flex;
	align-items: center;

	opacity: 0;
	pointer-events: none;
	transition: .2s ease-in-out;
	transform: translate(20px, -50%);

	input {
		min-width: 300px;
	}
}

.brxe-live-search::before {
	content: "";
	position: absolute;
	right: 0;
	width: 200%;
	height: 140%;
	background: linear-gradient(to left, var(--primary) 350px, transparent);
}

.brxe-live-search.search-is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0px, -50%);
}

.bricks-search-form input[type=search] {
	color: white !important;
	padding: .2em .8em;
}

#datafetch {
	opacity: 0;
	pointer-events: none;
	transition: all .3s ease-in-out;
	transform: translateY(20px);
}

#datafetch.search-is-on {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0px);
}

@media all and (max-width: 991px) {

	.brxe-live-search {
		right: 320px;

		transform: translate(20px, -50%);

		input[type="search"] {
			min-width: 300px;
			background: var(--primary);
		}
	}

	.brxe-live-search::before {
		content: unset;
	}

	#datafetch {
		right: -206px;

	}

}

@media all and (max-width: 767px) {

	.brxe-live-search {

		right: 320px;

		transform: translate(20px, -50%);

		input {
			min-width: 300px;
		}
	}

	.brxe-live-search::before {
		content: unset;
	}

	#datafetch {
		width: 300px;

		ul {
			grid-template-columns: 1fr;
		}

	}

}

@media all and (max-width: 478px) {


	.brxe-live-search {
		right: clamp(20rem, 31.646vw + 9.873rem, 25rem);
		top: 75px;

		transform: translate(20px, -50%);

		input {
			min-width: 300px;
		}
	}

	.brxe-live-search::before {
		content: unset;
	}

	#datafetch {
		position: fixed;
		inset: 0 !important;


	}

}