/* Scrollbars */
@property --scroll-thumb      {syntax:"<color>";inherits:true;initial-value:transparent;}
@property --scroll-track      {syntax:"<color>";inherits:true;initial-value:transparent;}
.thin-scrollbar               {--scroll-thumb:#d1dbe3;}
.thin-scrollbar.onhover       {--scroll-thumb:transparent;--scroll-track:transparent;}
.thin-scrollbar.onhover:hover {--scroll-thumb:#5c6670;--scroll-track:rgb(0 0 0/.1);}
/* Thin scrollbar */
.thin-scrollbar                      {overflow-x:hidden !important;overflow-y:auto !important;.foo{}
	&::-webkit-resizer,
	&::-webkit-scrollbar-button,
	&::-webkit-scrollbar-corner,
	&::-webkit-scrollbar-track-piece {display:none;}
	&::-webkit-scrollbar             {width:8px;background:none;border:none;}
	&::-webkit-scrollbar-thumb       {background:var(--scroll-thumb);background-clip:padding-box;border:1px solid transparent;border-radius:9999px;}
	&::-webkit-scrollbar-track       {background:var(--scroll-track);box-shadow:none;}
}
/* Onhover thin scrollbar */
.thin-scrollbar.onhover              {.foo{}
	&::-webkit-scrollbar             {width:4px;}
	&::-webkit-scrollbar-thumb       {border:0;}
	&::-webkit-scrollbar-track       {box-shadow:none;}
	/* Container fixes */
	&	                             {scrollbar-gutter:stable;}
	>*                               {margin-right:-4px !important;}
}

.hidden {display: none;}

p.paragraph-3 {
	font-size: 15px;
	font-weight: 600;
	color: #455E74;
}

.gaia-search-toggle {
	position: relative;
	color: #758a9d !important;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
	opacity: 0;
	height: 1em;
	.foo{}
	.gaia-search-form:hover & {
		opacity: 1;
	}
	span {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateX(-100%) translateY(-50%);
        padding: 2px 0;
        background-color: var(--wp--preset--color--base);
        border-radius: 9999px;
        white-space: nowrap;
        text-decoration: inherit;
        overflow: hidden;
        max-width: 0px;
        z-index: 1;
	}
	&:hover {
		text-decoration: underline;
		.foo{}
		span {
			max-width: unset;
            padding: 2px 12px;
		}
	}
}
.gaia-search-tags {
	.foo{}
	.gaia-search-tag {
		border: 1px solid currentColor;
        padding: 1px 10px 1px 25px;
        border-radius: 1.5rem;
        font-size: 12px;
        text-decoration: none;
        margin: 0 15px 8px 0;
        max-width: 20rem;
        float: left;
        transition: transform .15s;
		.foo{}
		&:hover {
			transform: scale(1.05) translateY(-1.5px);
			color: var(--wp--preset--color--accent-1);
			background-color:  var(--wp--preset--color--base);
		}
		&:active {
			transform: none;
			color: var(--wp--preset--color--accent-1);
			background-color:  var(--wp--preset--color--base);
			transition: transform 0s;
		}
		svg {
            padding: 6px;
            margin: -5px 0 -5px -22px;
            vertical-align: text-bottom;
            fill: currentColor;
		}
		svg:hover {
			fill: crimson;
			transform: scale(1.3);
		}
	}
}

.gaia-search-form {
	position: relative;
	.foo{}
	[type="search"] {
		color: var(--wp--preset--color--accent-2);
		
		font-weight: 600;
	}
	[type="submit"] {
		transition: transform .15s;
		.foo{}
		&:hover {
			transform: scale(1.3);
		}
		&:active {
			transform: none;
			transition: transform 0s;
		}
	}
	.search-dropdown {
		min-height:	3em;
		position: absolute;
        background: white;
        padding: 0;
        overflow: auto;
        color: var(--wp--preset--color--accent-2);
		border-radius: 1.3rem;
        width: 100%;
        font-size: 14px;
        font-weight: 700;
        list-style: none;
        z-index: 999;
        bottom: 0;
        transform: translateY(100%);
        margin: 0;
		max-height: 30rem;
		box-shadow: 0 0 3px 1px rgb(0 0 0/.05);
		
		.foo{}
		li {
			padding: 1.2rem 2.5rem;
			white-space: nowrap;
			cursor: pointer;
			.foo{}
			&+li{
				border-top: 1px solid var(--wp--preset--color--accent-5);
			}
			span.crumbs {
				font-size: 12px;
                font-weight: 400;
                color: #758A9D;
                display: block;
				.foo{}
				strong {
					font-weight: 600;
					text-transform: capitalize;
				}
			}
			label {
				cursor: pointer;
			}
			&.footer {
				position: sticky;
                left: 0;
                right: 0;
                bottom: 0;
				border: 0;
                background-color: #d9edff!important;
                color: #455E74;
                font-weight: 600;
                font-size: 12px;
                cursor: default;
			}
			&:hover {
				background-color: var(--wp--preset--color--accent-5);
			}
		}
	}
}

.gaia-search-panel {
	display: flex;
	padding: 1rem;
	column-gap: 1rem;
	.foo{}
	>* {flex-grow:0}
	>*:last-child {flex-grow:1}
	
	@media (max-width: 999px) {
		& {flex-direction: column-reverse;}
		.gaia-search-filters {flex-direction:row;flex-wrap:wrap;column-gap:1.8rem;}
	}
}

.gaia-search-filters {
	display: flex;
	flex-direction: column;
	row-gap: 1.8rem;
	.foo{}
}
.filter-block {
	position: relative;
	width: 200px;
	background-color: #e9f1f8;
	border: 1px solid #d1dfec;
	font-size: 12px;
	color: #0d2b47;
	padding: 1rem;
	.foo{}
	.filter-block-title {
		display: block;
		font-size: 13px;
		font-weight: 600;
	}
	.filter-block-body:has(>span) {
		margin-top: 0.5em;
	}
	.filter-block-group {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		padding: 1rem 0;
		.foo{}
		+& {border-top:1px solid #c1cdd8;}
		&:last-child {padding-bottom: 0;}
	}
	.filter-row {
		display: flex;
		align-items: center;
		gap: 0;
	}
	.collection {
		background-color: #fff;
		width: 100%;
		padding: 1rem 0px 1rem 0.7rem;
		max-height: 19rem;
	}
	.control-label {
		padding: 0;
		margin: 0;
		text-align: center;
		color: #173e63;
		.foo{}
		&.indent-0,&.indent-1 {
			display: block;
			text-align: left;
			margin-bottom: 5px;
			cursor: pointer;
			.foo{}
			[type="checkbox"] {
				vertical-align: bottom;
				height: auto;
				margin-right: 1rem;
			}
			strong {
				font-weight: 600;
			}
			&:hover {
				text-decoration: underline;
			}
		}
		&.indent-1 {
			text-indent: 2rem;
			font-weight: 400;
			margin-bottom: 3px;
			color: #455e74;
		}
	}
	.form-control {
		color: #667b8e;
		padding: 0 5px;
		border: 1px solid white;
		font-size: 11px;
		text-align: left;
		height: 2.4rem;
		border-radius: 0;
	}
	.form-button {
		position: relative;
		background-color: #2d75b8;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		padding: 6px 10px;
		.foo{}
		svg {
			position: absolute;
			right: 1rem;
			top: 50%;
			transform: translateY(-50%);
			fill: #fff;
		}
		&:hover {
			text-decoration: underline;
			.foo{}
			svg {
				transform: translateY(-50%) scale(1.3);
			}
		}
	}
}

.gaia-search-results {
	display: flex;
    background-color: #f6f7f9;
	.foo{}
	>* {flex-grow: 0;}
	>*:last-child {flex-grow: 1;}
	
	&>.collapsible {width:356px;}
	&>.collapsible.collapsed {width:0px;}
	
	@media (max-width: 781px) {
		& {flex-direction:column;}
		&>.collapsible {width:100%;height:auto;}
		.gaia-search-datasets {flex-direction:row;flex-wrap:wrap;}
		.gaia-search-datasets .dataset-block {width:100%;}
		&>.collapsible.collapsed {width:100%;}
		&>.collapsible.collapsed .gaia-search-datasets {max-height:2.5rem;}
	}
}

.gaia-search-datasets {
    position: relative;
    top: 4rem;
	display: flex;
    flex-direction: column;
    row-gap: 0.7rem;
    padding: 0 1rem 1rem;
    max-height: 925px;
	transition: max-height .25s;
	.foo{}
	.dataset-block {
		position: relative;
		width: 336px;
        font-size: 12px;
        background-color: #fff;
        border-radius: 1rem;
        box-shadow: 0 2px 3px 0 rgb(0 0 0 / .05);
		.foo{}
		&:hover {
			box-shadow: 0 2px 5px 0 rgb(0 0 0 / .15);
		}
		.dataset-block-body {
			display: block;
			padding: 1rem 1rem 1rem 4rem;
			border-bottom: 1px solid #e4e8eb;
			cursor: pointer;
			text-decoration: none;
		}
		.dataset-block-selector {
			position: absolute;
			top: 1rem;
			left: 1rem;
			color: #0d2b47;
			background-color: #54a447;
		}
		.dataset-title {
			display: block;
			font-size: 14px;
			font-weight: 600;
			color: #2d75b8;
		}
		.dataset-description {
			display: block;
			font-size: 12px;
			color: #000;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		.dataset-block-controls {
			padding: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
			.foo{}
			.dataset-button {
				color: #173e63;
				text-decoration: none;
				cursor: pointer;
				.foo{}
				svg {
					fill: #173e63;
					margin-right: 0.7rem;
					vertical-align: text-top;
				}
				&:hover {
					text-decoration: underline;
				}
			}
		}
	}
}

.custom-checkbox {
	position: relative;
	.foo{}
	&:not(:checked)::before {
		content: "";
		display: block;
		width: 11px;
		height: 11px;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid;
		border-color: inherit;
		background: #fff;
	}
	&:checked::before {
		content: "";
		display: block;
		color: #fff;
		width: 13px;
		height: 13px;
		position: absolute;
		top: 0;
		left: 0;
		background-color: inherit;
	}
	&:checked::after {
		content: "\2310";
        font-size: 1em;
        display: block;
        color: white;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotateZ(-45deg) scaleX(1) scaleY(-1) translateX(3.5px);
	}
}

.gaia-search-map {
	position: relative;
	height: 100%;
	.foo{}
	.map-controls {
		position: absolute;
	}
	.map-filters {
		position: absolute;
		top: 0;
		right: -1rem;
		background: #fff;
		padding: 2rem 1rem 1rem;
		.foo{}
		&.collapsible.collapsed {
			transform: translateX(100%);
		}		
	}
}

.panel-handle {
	position: absolute;
    top: 0;
    right: -2.7rem;
    text-decoration: none;
    color: #0d2b47;
    font-weight: 600;
	cursor: pointer;
    z-index: 1;
	.foo{}
}

.collapsible {
	position: relative;
	.foo{}
	.collapse-handle {
		position: absolute;
		right: 0;
		top: 0;
		font-style: normal;
		font-size: 20px;
		line-height: 0.8;
		white-space: nowrap;
		padding: 10px;
		cursor: pointer;
		z-index: 1;
		.foo{}
		&:hover {
			transform: scale(1.3);
			&:has(>svg,>img) {
				transform: none;
			}
		}
		&:has(>svg,>img) {
			padding: 0;
            font-size: 15px;
			font-weight: 600;
            line-height: 32px;
            border-radius: 0 32px 32px 0;
			.foo{}
			&::after {
				content: "";
                display: block;
                position: absolute;
                top: 6px;
                right: 6px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #fff;
                z-index: -1;
			}
			svg,img {
				vertical-align: bottom;
			}
		}
	}
}

.collapsible {
	transition: width .25s,transform .25s;
}

.gaia-search-map>.collapsed {
	transform: translateX(100%);
}

.gaia-search-datasets.thin-scrollbar {
	--scroll-thumb: #173e63;
}

.collection.thin-scrollbar {
	--scroll-thumb: #b9c5d0;
	&::-webkit-scrollbar {width:6px;}
}