$primary: var(--jeo-primary-color, currentColor);
$font: var(--jeo-font, inherit);

@keyframes jeo-discovery-spin {
	100% {
		transform: rotate(360deg);
	}
}

.discovery-block {
	--jeo-discovery-action-color: #{$primary};
	--jeo-discovery-action-hover-color: #{$primary};
	--jeo-discovery-action-hover-bg: transparent;
	--jeo-discovery-action-focus-color: #{$primary};
	--jeo-discovery-control-border-color: #555d66b8;
	--jeo-discovery-control-text-color: #555d66;
	--jeo-discovery-surface-color: #fff;
	position: relative;
	display: flex;
	height: var( --jeo-discovery-block-height, 100vh );
	overflow: hidden;
	background-color: white;

	@supports (background: color-mix(in srgb, red 10%, transparent)) {
		--jeo-discovery-action-hover-bg: color-mix(in srgb, #{$primary} 10%, transparent);
		--jeo-discovery-action-focus-color: color-mix(in srgb, #{$primary} 28%, transparent);
	}

	> *, button, input, select, textarea {
		font-family: $font;
	}

	// discovery embed class is parent of current reference (&)
	.discovery-embed & {
		display: block;
		height: calc(100vh - 35px);

		.discovery-map {
			height: 100%;
		}

		:is(.mapboxgl-map, .maplibregl-map) {
			height: 100%;
		}
	}

	&.active:not(.embed) {
		.discovery-map {
			margin-inline-start: 30%;
		}

		.default-sidebar {
			inset-inline-start: 0;
		}

	}

	.default-sidebar {
		position: absolute;
		width: 30%;
		inset-inline-start: -30%;
		max-height: 100%;
		height: 100%;
		transition: all .2s ease-in-out;

		.discovery-title {
			text-transform: uppercase;
			border-inline-start: 3px solid $primary;
			font-weight: bold;
			padding-inline-start: 13px;
			font-size: 16px;
			margin-bottom: 25px;
			margin-inline-start: 20px;
			margin-top: 25px;
		}
	}

	button {
		background-color: transparent;
		text-transform: none;
		padding: 0;
		font-weight: 400;
		text-decoration: none;
		color: #555d66;

		&:hover {
			background-color: transparent;
			color: var( --jeo-discovery-action-hover-color );
			text-decoration: none;
		}
	}

	.discovery-map {
		--jeo-attribution-offset: 0px;
		width: 100%;
		margin-inline-start: 0;
		transition: all .2s ease-in-out;

		&__container {
			height: 100%;
			width: 100%;
		}

		:is(.mapboxgl-ctrl-attrib, .maplibregl-ctrl-attrib) {
			background: #ffffff80;
			border-radius: 0;
			box-shadow: none;
			max-width: none;
			padding: 0;
		}

		:is(.mapboxgl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right) {
			inset-inline-end: 0;
			bottom: 0;
			padding: 0;
			display: flex;
			align-items: flex-end;
		}

		.mapboxgl-ctrl-bottom-right {
			max-width: calc(100% - 120px);
		}

		:is(.mapboxgl-ctrl-bottom-right, .maplibregl-ctrl-bottom-right) > :is(.mapboxgl-ctrl, .maplibregl-ctrl) {
			margin: 0;
		}

		.mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib {
			max-width: 100%;
		}

		.mapboxgl-control-container .mapboxgl-ctrl-attrib-inner,
		.maplibregl-control-container .maplibregl-ctrl-attrib-inner {
			font-size: 11px;
			line-height: 1.35;
			padding: 4px 8px;
			white-space: normal;
			color: rgba(0, 0, 0, .78);

			a[href] {
				color: rgba(0, 0, 0, .78);
				text-underline-offset: 2px;
			}
		}

		.mapboxgl-ctrl-attrib.mapboxgl-compact-show {

			.mapboxgl-ctrl-attrib-inner {
				visibility: visible;
			}
		}

		.maplibregl-ctrl-attrib.maplibregl-compact-show {

			.maplibregl-ctrl-attrib-inner {
				visibility: visible;
			}
		}

		.mapboxgl-ctrl-attrib.mapboxgl-compact,
		.maplibregl-ctrl-attrib.maplibregl-compact {
			min-height: 24px;
		}

		.mapboxgl-ctrl-attrib.mapboxgl-compact {
			.mapboxgl-ctrl-attrib-button {
				visibility: visible;
			}
		}

		.maplibregl-ctrl-attrib.maplibregl-compact {
			min-height: auto;

			.maplibregl-ctrl-attrib-button {
				display: none;
			}
		}

		.share-toolbar {
			background-color: white;
			height: 50px;
			padding: 0 15px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			inset-inline-end: 25px;
			top: 25px;
			border-radius: 5px;
			box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.01 );
			overflow: hidden;
			z-index: 999;

			button {
				transition: all 0.2s ease-in-out;

				&:hover {
					transition: all 0.2s ease-in-out;
					transform: scale( 1.07 );
				}

				&.share {
					width: 30px;
					height: 30px;
					border: 2px solid $primary;
					border-radius: 50%;
					padding: 5px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: $primary;

					.share-icon {
						width: 13px;
						margin-inline-start: -1px;
					}
				}
			}

			&.active {
				overflow: visible;

				.options {
					transform: translate( 0, 0 ) scaleX( 1 );
					transition: all 0.4s ease-in-out;
					padding-inline-end: 8px;
					width: 265px;
					overflow: visible;

					.embed-tooltip {
						position: absolute;
						top: 50px;
						inset-inline-end: 0px;
						padding: 13px;
						background: white;
						border-radius: 7px;
						width: 220px;

						&:before {
							content: '';
							position: absolute;
							top: -5px;
							inset-inline-end: 50px;
							width: 0px;
							height: 0px;
							border-inline-start: 5px solid transparent;
							border-inline-end: 5px solid transparent;
							border-bottom: 5px solid white;
						}

						textarea {
							border: 1px solid #555d66;
							padding: 5px;
							font-size: 13px;
							line-height: 16px;
						}
					}
				}
			}

			.options {
				transform: translate( -110px, 0 ) scaleX( 0 );
				transition: all 0.4s ease-in-out;
				width: 0;
				overflow: hidden;
				display: flex;

				button {
					background-color: $primary;
					color: white;
					font-weight: bold;
					font-size: 14px;
					padding: 0 23px;
					height: 30px;
					border-radius: 30px;
					line-height: 0;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				a {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $primary;
					color: white;
					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-inline-end: 9px;

					&:hover {
						transform: scale(1.07);
					}

					svg {
						height: 15px;
					}
				}

				.embed-tooltip {
					width: 0;
					overflow: hidden;
				}
			}
		}

		.mapboxgl-control-container {

			.mapboxgl-ctrl-top-left {
				display: flex;
				align-items: flex-start;
				padding: 15px;

				.mapboxgl-ctrl-group:not(:empty) {
					display: flex;
				}
			}
		}

		.maplibregl-control-container {

			.maplibregl-ctrl-top-left {
				display: flex;
				align-items: flex-start;
				padding: 15px;

				.maplibregl-ctrl-group:not(:empty) {
					display: flex;
				}
			}
		}

		:is(.mapboxgl-ctrl-group, .maplibregl-ctrl-group) {
			background: var( --jeo-discovery-surface-color );
			border-radius: 5px;
			box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.1 );
			display: flex;
			overflow: hidden;

			button {
				background-color: var( --jeo-discovery-surface-color ) !important;
				border: 0;
				border-radius: 0;
				box-shadow: none;
				color: var( --jeo-discovery-control-text-color );
				display: block;
				filter: none;
				height: 32px;
				min-height: 32px;
				min-width: 32px;
				padding: 0;
				width: 32px;

				&:hover,
				&:focus,
				&:active {
					background-color: var( --jeo-discovery-surface-color ) !important;
					box-shadow: inset 0 0 0 2px var( --jeo-discovery-action-focus-color );
					color: var( --jeo-discovery-control-text-color );
					filter: none;
					outline: none;
				}

				& + button {
					border-inline-start: 1px solid rgba( 0, 0, 0, 0.14 );
				}

				.mapboxgl-ctrl-icon,
				.maplibregl-ctrl-icon {
					background-position: center;
					background-repeat: no-repeat;
					display: block;
					height: 100%;
					width: 100%;
				}
			}
		}
	}

	.default-sidebar, .is-embed {
		max-height: 100%;
		box-shadow: 0px 22px 13px rgba( 0, 0, 0, 0.31 );
		z-index: 1;

		.collapse-toolbar {
			width: 40px;
			height: 50px;
			background: white;
			position: absolute;
			top: 114px;
			inset-inline-start: 100%;
			z-index: 25;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 0 10px 10px 0;
			box-shadow: 2px 0 6px 0 rgba(0,0,0,0.3);
			transition: all .2s ease-in-out;

			&:hover {
				width: 60px;
				transition: all .2s ease-in-out;
			}

			svg {
				width: 12px;
				color: $primary;
			}
		}
	}

	.togable-panel {
		background-color: #ffffff;
		z-index: 1;
		min-height: calc(100% - 68px);
    	max-height: calc(100% - 68px);
		overflow-y: auto;

		@extend .scroll-bar-style;

		div[role='tabpanel'] {
			padding: 30px;
		}

		.components-tab-panel {
			&__tabs {
				display: grid;
				grid-template-columns: repeat( 2, 1fr );
				border-bottom: 1px solid $primary;
				position: sticky;
				top: 0;
				background: white;
				z-index: 1;

				button {
					background: none;
					color: #191e23;
					font-size: 16px;
					font-weight: bold;
					letter-spacing: 0;
					line-height: 1.5rem;
					padding: 10px;
					text-decoration: none;
					outline: none;
					text-transform: uppercase;
					opacity: 0.5;

					&:after {
						transition: all 0.2s ease-in-out;
						content: '';
						display: block;
						height: 0px;
						width: 100%;
						position: absolute;
						bottom: 0px;
						inset-inline-start: 0;
						background: $primary;
					}

					&.active-tab {
						position: relative;
						opacity: 1;

						&:after {
							height: 3px;
							transition: all 0.2s ease-in-out;
						}
					}

					.tab-toggle {
						display: flex;
						justify-content: center;
						align-items: center;

						svg {
							height: 18px;
							width: 21px;
							margin-inline-end: 10px;
						}
					}
				}
			}
		}

		.search-area {
			display: flex;
			border-radius: 0 10px 10px 0;
			margin-bottom: 15px;

			input {
				flex: 0 0 calc( 100% - 77px );
				border: 2px solid #dddddd;
				border-radius: 10px 0 0 10px;
				height: 50px;
				border-inline-end: 0px;
				font-weight: bold;

				&:disabled {
					opacity: 0.75;
				}
			}

				button {
					flex: 0 0 77px;
					height: 50px;
				padding: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 0 10px 10px 0;
					background-color: $primary;
					color: white;

					&:hover,
					&:focus {
						background-color: $primary;
						color: white;
						filter: brightness( 0.95 );
					}

					svg {
						width: 19px;
						height: 20px;
				}

				&:disabled {
					cursor: wait;
					opacity: 0.75;
				}
			}
		}

		.stories-tab {
			.toggle-filters {
				display: flex;
				justify-content: center;
				text-transform: uppercase;
				font-weight: bold;
				font-size: 14px;
				letter-spacing: 0;
				margin-top: 5px;
				margin-bottom: 15px;
				color: var( --jeo-discovery-control-text-color );
				border-radius: 4px;
				cursor: pointer;

				svg {
					width: 16px;
					margin-inline-end: 9px;
				}

				&:hover,
				&:focus,
				&:active {
					background: transparent;
					color: var( --jeo-discovery-action-hover-color );
					filter: none;
					outline: none;
				}
			}

			.filters {
				display: grid;
				grid-template-columns: repeat(2, minmax(0, 1fr));
				grid-column-gap: 10px;
				margin-bottom: 15px;

				select,
				input,
				.jeo-date-range-filter__toggle {
					padding: 7px 6px;
					font-size: 14px;
					border-radius: 5px;
					background: #fff;
					border: 2px solid var( --jeo-discovery-control-border-color );
					font-weight: bold;
					color: var( --jeo-discovery-control-text-color );
					min-height: 40px;
				}

				.jeo-date-range-filter {
					position: relative;
				}

				.jeo-date-range-filter__toggle {
					width: 100%;
					text-align: left;
					cursor: pointer;
				}

				.jeo-date-range-filter__toggle:not(.has-value) {
					color: #777;
				}

				.jeo-date-range-filter__toggle:hover,
				.jeo-date-range-filter__toggle:focus,
				.jeo-date-range-filter__toggle:active,
				.jeo-date-range-filter__toggle[aria-expanded="true"] {
					background: #fff;
					border-color: $primary;
					color: var( --jeo-discovery-control-text-color );
					filter: none;
					outline: none;
				}

				.jeo-date-range-filter__popover {
					position: absolute;
					top: calc( 100% + 8px );
					inset-inline-start: 0;
					z-index: 6;
					background: #fff;
					border: 1px solid rgba( 0, 0, 0, 0.12 );
					border-radius: 8px;
					box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.12 );
					padding: 8px;
				}

				.jeo-date-range-filter__actions {
					display: flex;
					justify-content: flex-end;
					gap: 8px;
					padding: 8px 4px 4px;
				}

				.jeo-date-range-filter__action {
					border: 1px solid #dcdcde;
					border-radius: 6px;
					padding: 6px 10px;
					font-size: 13px;
					font-weight: 600;
					cursor: pointer;
				}

				.jeo-date-range-filter__action--secondary {
					background: #fff;
					color: #1d2327;
				}

				.jeo-date-range-filter__action--primary {
					background: $primary;
					border-color: $primary;
					color: #fff;
				}

				.jeo-date-range-filter__action:hover,
				.jeo-date-range-filter__action:focus {
					background: var( --jeo-discovery-action-hover-bg );
					color: #1d2327;
				}

				.jeo-date-range-filter__action--primary:hover,
				.jeo-date-range-filter__action--primary:focus {
					background: $primary;
					color: #fff;
					filter: brightness( 0.95 );
				}

				.jeo-date-range-filter__action:disabled {
					opacity: 0.5;
					cursor: default;
				}

				.react-datepicker {
					border: 0;
					font-family: inherit;
					width: 100%;
				}

				.react-datepicker__month-container {
					width: 100%;
				}

				.jeo-date-range-filter__header {
					align-items: center;
					display: grid;
					grid-template-columns: 32px minmax(120px, 1fr) 82px 32px;
					gap: 6px;
					padding: 6px 4px 10px;
				}

				.jeo-date-range-filter__navigation {
					align-items: center;
					background: transparent;
					border: 0;
					border-radius: 4px;
					color: var( --jeo-discovery-control-text-color );
					cursor: pointer;
					display: flex;
					filter: none;
					height: 32px;
					justify-content: center;
					min-height: 32px;
					min-width: 32px;
					padding: 0;
					width: 32px;

					svg {
						height: 18px;
						width: 18px;
					}

					&:hover,
					&:focus,
					&:active {
						background: var( --jeo-discovery-action-hover-bg );
						box-shadow: none;
						color: var( --jeo-discovery-action-hover-color );
						filter: none;
						outline: none;
					}

					&:disabled {
						cursor: default;
						opacity: 0.45;
					}
				}

				.jeo-date-range-filter__month-select,
				.jeo-date-range-filter__year-select {
					background: #fff;
					border: 1px solid var( --jeo-discovery-control-border-color );
					border-radius: 4px;
					box-shadow: none;
					color: var( --jeo-discovery-control-text-color );
					font-size: 13px;
					font-weight: 600;
					height: 32px;
					line-height: 18px;
					min-height: 32px;
					padding: 4px 6px;
					width: 100%;

					&:hover,
					&:focus,
					&:active {
						border-color: $primary;
						box-shadow: 0 0 0 1px $primary;
						filter: none;
						outline: none;
					}
				}

				.discovery-tag-filter {
					min-width: 0;

					.components-base-control,
					.components-base-control__field,
					.components-combobox-control,
					.components-form-token-field,
					.components-form-token-field__input-container {
						margin: 0;
						min-height: 0;
					}

					.components-combobox-control__suggestions-container {
						background: transparent;
						border: 0;
						box-shadow: none;
						display: block;
						margin: 0;
						max-height: none;
						overflow: visible;
						position: relative;
						z-index: auto;
					}

					.components-combobox-control__suggestions-container > .components-flex {
						align-items: center;
						background: #fff;
						border: 2px solid var( --jeo-discovery-control-border-color );
						border-radius: 5px;
						box-sizing: border-box;
						min-height: 40px;
						overflow: hidden;
						width: 100%;
					}

					.components-combobox-control__suggestions-container:focus-within > .components-flex {
						border-color: $primary;
						box-shadow: 0 0 0 1px $primary;
					}

					.components-combobox-control__input.components-form-token-field__input {
						background: #fff;
						border: 0;
						box-shadow: none;
						color: var( --jeo-discovery-control-text-color );
						font-family: $font;
						font-size: 14px;
						font-weight: bold;
						height: 36px;
						line-height: 20px;
						min-height: 36px;
						padding: 7px 6px;
						width: 100%;

						&:focus {
							border: 0;
							box-shadow: none;
							outline: none;
						}
					}

					.components-button.is-small.has-icon {
						align-items: center;
						background: transparent;
						border: 0;
						color: #555d66;
						display: flex;
						flex: 0 0 32px;
						height: 36px;
						justify-content: center;
						min-width: 32px;
						padding: 0;

						&:disabled {
							display: none;
						}

						&:hover,
						&:focus {
							background: var( --jeo-discovery-action-hover-bg );
							color: var( --jeo-discovery-action-hover-color );
						}
					}

					.components-form-token-field__suggestions-list {
						background: #fff;
						border: 1px solid #dcdcde;
						border-radius: 6px;
						box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.12 );
						inset-inline: 0;
						margin: 0;
						max-height: 240px;
						overflow: auto;
						padding: 4px;
						position: absolute;
						top: calc( 100% + 6px );
						z-index: 7;
					}

					.components-form-token-field__suggestion {
						border-radius: 4px;
						color: #1d2327;
						font-family: $font;
						font-size: 14px;
						line-height: 18px;
						padding: 8px 10px;

						&.is-selected,
						&:hover {
							background: var( --jeo-discovery-action-hover-bg );
							color: #1d2327;
						}
					}

					&__tokens {
						display: flex;
						flex-wrap: wrap;
						gap: 6px;
						margin-top: 6px;
					}

					&__token {
						align-items: center;
						border: 1px solid var( --jeo-discovery-control-border-color );
						border-radius: 5px;
						color: var( --jeo-discovery-control-text-color );
						display: inline-flex;
						font-size: 12px;
						font-weight: bold;
						gap: 4px;
						line-height: 16px;
						max-width: 100%;
						padding: 3px 4px 3px 7px;

						> span {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						button {
							align-items: center;
							background: transparent;
							border: 0;
							border-radius: 4px;
							color: inherit;
							cursor: pointer;
							display: flex;
							filter: none;
							height: 20px;
							justify-content: center;
							min-height: 20px;
							min-width: 20px;
							padding: 0;
							width: 20px;

							svg {
								height: 14px;
								width: 14px;
							}

							&:hover,
							&:focus,
							&:active {
								background: var( --jeo-discovery-action-hover-bg );
								box-shadow: none;
								color: var( --jeo-discovery-action-hover-color );
								filter: none;
								outline: none;
							}
						}
					}
				}
			}

			.stories-results-summary {
				align-items: center;
				color: #555d66;
				display: flex;
				font-size: 13px;
				font-weight: bold;
				justify-content: space-between;
				line-height: 18px;
				margin: 0 0 12px;

				button {
					border: 1px solid $primary;
					border-radius: 5px;
					color: $primary;
					font-size: 12px;
					font-weight: bold;
					padding: 4px 8px;

					&:hover,
					&:focus {
						background: var( --jeo-discovery-action-hover-bg );
						color: var( --jeo-discovery-action-hover-color );
					}
				}
			}

			.stories-active-filters {
				display: flex;
				flex-wrap: wrap;
				gap: 6px;
				margin: -4px 0 14px;

				&__item {
					background: #f5f5f5;
					border: 1px solid #dddddd;
					border-radius: 5px;
					color: #555d66;
					font-size: 12px;
					font-weight: bold;
					line-height: 16px;
					padding: 4px 7px;
				}
			}

			.stories-status {
				align-items: center;
				color: #555d66;
				display: flex;
				font-size: 14px;
				font-weight: bold;
				gap: 8px;
				line-height: 20px;
				margin: 12px 0;
				padding: 10px 0;

				svg {
					color: $primary;
					height: 18px;
					width: 18px;
				}
			}

			.stories-status--loading svg {
				animation: jeo-discovery-spin 1s linear infinite;
			}

			.stories-status--loading {
				justify-content: center;
			}

			.stories-status--loading-more {
				margin: 18px 0 0;
				padding: 14px 0 0;
			}

			.stories-status--empty {
				background: #f7f7f7;
				border: 1px solid #dddddd;
				border-radius: 6px;
				padding: 14px;
			}

			.stories {
				.card {
					width: calc( 100% + 60px );
					margin-inline-start: -30px;
					padding: 16px 30px;
					transition: all 0.2s ease-in-out;
					display: block;
    				text-decoration: none;

					&:not( .no-thumb ) {
						display: grid;
						grid-template-columns: 37.5% auto;
						grid-column-gap: 30px;
					}

					&:hover, &.active {
						background-color: #f5f5f5;
						transition: all 0.2s ease-in-out;
					}

					.sideway {
						color: #0a0a0a;

						.categories {
							font-size: 14px;
							color: #555d66;
							margin-bottom: 7px;
							text-transform: uppercase;
							font-weight: bold;
						}

						.title {
							color: inherit;
							display: block;
							font-weight: bold;
							font-size: 18px;
							padding-bottom: 5px;
							line-height: 22px;
							text-decoration: none;

							&:hover {
								color: $primary;
								text-decoration: none;
							}
						}

						.date {
							opacity: 0.5;
							font-size: 14px;
						}

						a {
							text-decoration: none;
						}

						button.view-in-map {
							color: $primary;
							cursor: pointer;
							font-size: 13px;
							font-weight: bold;
							line-height: 18px;
							text-align: left;

							&:hover,
							&:focus {
								background: transparent;
								color: var( --jeo-discovery-action-hover-color );
								text-decoration: underline;
								text-underline-offset: 3px;
							}
						}
					}

					.lazyload-wrapper {
						position: absolute;
						top: 0;
						inset-inline-start: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.maps-tab {
			.selected-layers {
				padding: 1.5rem 1.8rem;
				border: 2px solid #dddddd;
				border-radius: 10px 10px 0 0;
				position: relative;
				border-bottom: 0;

				&--title {
					font-weight: bold;
					font-size: 18px;
					margin-bottom: 10px;
					padding: 9px 0;
					line-height: 22px;
				}

				&--content {
					font-size: 14px;
					padding-top: 13px;
				}

				.status {
					position: absolute;
					inset-inline-end: 0;
					top: 1.5rem;
					width: 100px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					text-align: center;

					&-icon {
						width: 15px;
						margin-bottom: 4px;
					}

					&-message {
						font-size: 12px;
						line-height: 14px;
						text-transform: uppercase;
					}
				}
			}

			.apply-changes {
				width: 100%;
				background: $primary;
				color: white;
				padding: 10px;
				border-radius: 0 0 10px 10px;
				margin-bottom: 30px;
				font-size: 16px;
				letter-spacing: 0px;
				text-decoration: none;
				font-weight: bold;

				&:hover,
				&:focus {
					background: $primary;
					color: white;
					filter: brightness( 0.95 );
				}

				&.disabled {
					opacity: 0.7;
					cursor: not-allowed;
					filter: none;
				}
			}

			.map-itens {
				.map-item {
					position: relative;
					margin-bottom: 33px;

					.title {
						font-weight: bold;
						font-size: 18px;
						padding-bottom: 5px;
						padding-inline-end: 80px;
						line-height: 22px;
					}

					.description {
						opacity: 0.5;
						color: #0a0a0a;
						font-size: 14px;
						letter-spacing: 0;
						line-height: 19px;
						margin-bottom: 7px;
					}

					.layers-toggle {
						font-size: 14px;
						display: flex;
						color: #555d66;
						cursor: pointer;

						&:hover,
						&:focus {
							background: transparent;
							color: var( --jeo-discovery-action-hover-color );
						}

						svg {
							width: 16px;
							margin-inline-end: 5px;
						}
					}

					.apply-remove-all {
						position: absolute;
						top: 0;
						inset-inline-end: 0;
						background-color: $primary;
						padding: 5px 10px;
						color: white;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 5px;
						letter-spacing: 0;
						font-size: 14px;
						font-weight: bold;

						&:hover,
						&:focus {
							background-color: $primary;
							color: white;
							filter: brightness( 0.95 );
						}

						&:disabled {
							cursor: wait;
							opacity: 0.8;
							filter: none;
						}

						&.clear {
							background: none;
							border: 1px solid $primary;
							color: $primary;

							&:hover,
							&:focus {
								background: var( --jeo-discovery-action-hover-bg );
								color: var( --jeo-discovery-action-hover-color );
								filter: none;
							}
						}

						svg {
							width: 13px;
							margin-inline-end: 7px;
						}

						.map-item__loading-icon {
							animation: jeo-discovery-spin 1s linear infinite;
							margin-inline-end: 0;
						}
					}

					.layers-toggles {
						display: flex;
						flex-direction: column;

						&__loading {
							align-items: center;
							color: $primary;
							display: flex;
							justify-content: center;
							margin-top: 13px;
							padding: 8px 0;

							svg {
								animation: jeo-discovery-spin 1s linear infinite;
								height: 18px;
								width: 18px;
							}
						}

						.layer-toggle {
							align-items: center;
							background: transparent;
							border: 0;
							border-radius: 4px;
							box-shadow: none;
							display: flex;
							color: #0a0a0a;
							cursor: pointer;
							filter: none;
							font-size: 14px;
							padding: 2px 0;
							text-align: inline-start;
							width: 100%;

							&:hover,
							&:focus,
							&:active {
								background: transparent;
								box-shadow: none;
								color: var( --jeo-discovery-action-hover-color );
								filter: none;
							}

							&:first-child {
								margin-top: 13px;
							}

							&.no-current-map-layer {
								cursor: not-allowed;
								opacity: 0.6;
							}

							&.current-map-layer {
								color: #0a0a0a;

								&:hover,
								&:focus,
								&:active {
									color: var( --jeo-discovery-action-hover-color );
								}
							}

							span {
								margin-inline-start: 8px;
							}

							svg {
								width: 21px;
							}
						}
					}
				}
			}

			.maps-loading {
				align-items: center;
				color: $primary;
				display: flex;
				justify-content: center;
				margin-top: 16px;

				svg {
					animation: jeo-discovery-spin 1s linear infinite;
					height: 18px;
					width: 18px;
				}
			}

			.load-more-maps {
				width: 100%;
				margin-top: 16px;
				padding: 12px 16px;
				border: 1px solid rgba( 0, 0, 0, 0.12 );
				border-radius: 10px;
				color: $primary;
				font-weight: 700;
				text-align: center;

				&:hover,
				&:focus {
					background: var( --jeo-discovery-action-hover-bg );
					color: var( --jeo-discovery-action-hover-color );
				}
			}
		}
	}

	@keyframes placeHolderShimmer {
		0% {
			background-position: -468px 0;
		}

		100% {
			background-position: 468px 0;
		}
	}

	.animated-background {
		animation-duration: 1s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
		animation-name: placeHolderShimmer;
		animation-timing-function: linear;
		background: #f6f7f8;
		background: linear-gradient(
			to right,
			#eeeeee 8%,
			#dddddd 18%,
			#eeeeee 33%
		);
		background-size: 800px 104px;
		height: 96px;
		position: relative;

		&.placeholder {
			position: absolute;
			inset-inline-start: 0;
			width: 30%;
			height: 100%;
		}
	}

	@keyframes spin {
		100% {
			transform: rotate( 360deg );
		}
	}

	svg[data-icon='spinner'] {
		width: 30px;
		margin: 0 auto;
		animation: spin 1s linear infinite;
		margin-top: 30px;
		margin-bottom: 15px;
		color: var(--jeo-primary-color);
	}

		.is-embed {
			display: none;
		}

		div.more-info-overlayer {
			box-sizing: border-box;
			background-color: white;
			position: absolute;
			top: 10px;
			inset-inline-start: 10px;
			z-index: 10;
			width: calc(100% - 250px);
			height: calc(100% - 70px);
			max-width: calc(100% - 20px);
			max-height: calc(100% - 70px);
			margin-top: 50px;
			overflow-y: auto;
			padding: 0 20px 20px;
		}

		&.active:not(.embed) {
			div.more-info-overlayer {
				inset-inline-start: calc(30% + 10px);
				width: calc(70% - 250px);
				max-width: calc(70% - 20px);
			}
		}

		.more-info-overlayer {
			font-family: $font;

			.more-info-close {
				position: absolute;
				top: 10px;
				inset-inline-end: 10px;
				z-index: 11;
				cursor: pointer;
			}

			:is(.mapboxgl-popup-close-button, .maplibregl-popup-close-button) {
				border-radius: 0;
				cursor: pointer;
				width: 22px;
				height: 22px;
				display: block;
				padding: 0;
				font-size: 18px;
				background: var(--jeo_close-bkg-color);
				color: var(--jeo_close-color);

				&:hover {
					text-decoration: none;
					background-color: var(--jeo_more-bkg-color-darker-15);
				}

				span {
					font-size: 24px;
					font-weight: 100;
					line-height: 18px;
				}
			}

			.more-info-content {
				font-family: $font;
				padding-top: 20px;

				h2 {
					font-family: $font;
				}

				p {
					font-family: $font;
				}
			}

			.map-content-layers-list {
				font-size: 16px;
				line-height: 25px;
				font-family: $font;

				a.download-source {
					font-family: $font;
					background: #fff;
					border: 1px solid rgba(0, 0, 0, 0.4);
					color: #404040;
					margin-top: 8px;
					padding: 4px 10px;
					text-decoration: none;
					border-bottom: 1px solid rgba(0, 0, 0, 0.25);
					text-align: center;
					cursor: pointer;
					display: inline-block;
					font-size: 16px;
					font-weight: bold;
					transition: all 0.2s ease-in-out;

					&:hover {
						background: rgba(0, 0, 0, 0.05);
						transition: all 0.2s ease-in-out;
					}
				}

				h3 {
					font-family: $font;
				}
			}
		}

		div.legend-container {
			background: #fff;
			position: absolute;
			bottom: calc(var(--jeo-attribution-offset, 0px) + 30px);
			inset-inline-end: 10px;
			z-index: 1;
			display: block;
			margin: 0;
			max-width: 220px;
			min-width: 220px;

			.legends-wrapper {
				display: block;
			padding-top: 25px;
			padding-inline: 20px;
			max-height: 250px;
			overflow-x: auto;

			@extend .scroll-bar-style;

			.legend-single-title {
				margin-bottom: 15px;
				font-size: 16px;
				color: #333;
				font-weight: bold;
				display: block;
				font-family: $font;
			}

			h4 {
				margin: 15px 0;
				font-size: 2.2rem;
			}
		}

			.legends-title {
				background: #191e23;
				padding: 9px 20px;
				color: white;
			font-size: 16px;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
				align-items: center;
			}

			.more-info-title {
				cursor: pointer;
			}

			.text-icon {
				display: flex;
				align-items: center;
			}

			.text-icon {
				.legend-icon {
					width: 14px;
					height: 16px;
					background-size: cover;
					background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='list' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' class='svg-inline--fa fa-list fa-w-16 fa-3x'%3E%3Cpath fill='%23333' d='M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' class=''%3E%3C/path%3E%3C/svg%3E");
					background-position: center;
					cursor: pointer;
					margin-inline-end: 12px;
					filter: brightness(0) invert(1);
				}

				.info-icon {
					width: 16px;
					height: 16px;
					background-size: cover;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M11 10h2v7h-2zm0-3h2v2h-2z'/%3E%3Cpath fill='%23333' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16z'/%3E%3C/svg%3E");
					background-position: center;
					cursor: pointer;
					margin-inline-end: 12px;
					filter: brightness(0) invert(1);
				}
			}

			i.arrow-icon {
				width: 14px;
				color: white;
				cursor: pointer;
		}

		i.arrow-icon.active {
			transform: rotate( 180deg );
		}

		a.more-info-button {
			background: var(--jeo_more-bkg-color);
			color: var(--jeo_more-color);
			margin: 20px auto 20px auto;
			padding: 3px;
			border-radius: 5px;
			text-decoration: none;
			text-align: center;
			cursor: pointer;
			width: calc( 100% - 40px );
			display: block;
			font-weight: bold;
			font-family: $font;
			font-size: 8px;
			line-height: 20px;
			transition: all 0.1s ease-in-out;
			text-transform: uppercase;

			&:hover {
				background-color: var(--jeo_more-bkg-color-darker-15);
				color: var(--jeo_more-color);
				transition: all 0.1s ease-in-out;
			}
		}

		.hideable-content {
			min-height: 110px;
			max-height: 250px;
			transition: all 0.3s ease-in-out;
			overflow: hidden;
		}

		&.active {
			.hideable-content {
				max-height: 0;
				transition: all 0.3s ease-in-out;
				min-height: 0;
			}
		}
	}

	.layers-wrapper {
		a {
			text-decoration: none !important;
		}

		> div {
			margin-bottom: 27px;
		}
	}

	:is(.mapboxgl-popup, .maplibregl-popup):not(:last-child) {
		display: none;
	}

	:is(.mapboxgl-popup .mapboxgl-popup-content, .maplibregl-popup .maplibregl-popup-content) {
		background-color: white;
		border-radius: 5px;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);

			h2 {
				font-family: $font;
			}
		}

		:is(.mapboxgl-popup, .maplibregl-popup):not(.jeo-popup__mouseover) {
			:is(.mapboxgl-popup-content, .maplibregl-popup-content) {
				h3 {
					margin-top: 1.2rem;
				}
			}
	}

		:is(.mapboxgl-popup-content, .maplibregl-popup-content) {
			h3,
			p {
			color: #111 !important;
			font-size: 16px;
			}

			h3 {
				font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
				font-weight: 700;
				line-height: 1.3;
				margin: 0 0 0.45rem;
		}

		p {
			font-family: $font;
			line-height: 1.4;
			margin: 0;
		}

		p + p {
			margin-top: 0.35rem;
		}

			strong {
				font-weight: 700;
			}
		}

		:is(.mapboxgl-popup-close-button, .maplibregl-popup-close-button) {
			position: absolute;
			inset-inline-end: 6px;
			top: 6px;
			border-radius: 0;
			cursor: pointer;
			width: 22px;
			height: 22px;
			display: block;
			padding: 0;
			font-size: 18px;
			background: var(--jeo_close-bkg-color);
			color: var(--jeo_close-color);

			&:hover {
				text-decoration: none;
				background-color: var(--jeo_more-bkg-color-darker-15);
			}

			span {
				font-size: 24px;
				font-weight: 100;
				line-height: 18px;
			}
		}

		:is(.mapboxgl-popup.mapboxgl-popup-anchor-bottom, .maplibregl-popup.maplibregl-popup-anchor-bottom) {
			&:not(.jeo-popup__mouseover) {
			margin-top: -28px;
		}
	}

		:is(.mapboxgl-popup.mapboxgl-popup-anchor-top, .maplibregl-popup.maplibregl-popup-anchor-top) {
			&:not(.jeo-popup__mouseover) {
				margin-top: 28px;
			}
		}

		.jeo-popup__mouseover {
			font-size: 16px;
			transform: none !important;
			inset-inline-start: 5px;
			inset-inline-end: auto;
			top: 110px !important;
			max-width: min(300px, calc(100vw - 24px));
			padding: 5px;
			pointer-events: none;

			* {
				font-size: 16px;
			}

			:is(.mapboxgl-popup-tip, .maplibregl-popup-tip) {
				display: none !important;
			}
		}

		.mapboxgl-popup.jeo-popup__mouseover {
			top: 122px !important;
		}

		&:not(.embed) .jeo-popup__mouseover {
			inset-inline-start: 52px;
		}
	}

	.layer-item {
	font-family: $font;
	font-size: 14px;
	z-index: 1;
	cursor: grab;
	display: flex;
	position: relative;
	margin-bottom: 15px;

	* {
		font-family: inherit;
	}

		&--map {
			text-transform: uppercase;
			font-size: 13px;
			font-weight: bold;
		}

		&--content {
			flex: 1 1 auto;
			min-width: 0;
			padding-inline-end: 34px;
		}

		&--map,
		&--layer {
			overflow-wrap: anywhere;
		}

		svg {
			&.drag-icon {
			width: 8px;
			opacity: 0.5;
			margin-inline-end: 5px;
			height: 15px;
			margin-top: 2px;
		}
	}

	button {
		background: none;
		text-transform: none;
		padding: 0;
		font-weight: 400;
		text-decoration: none;
		color: #555d66;

		&:hover {
			text-decoration: none;
		}
	}

	.remove-layer {
		align-items: center;
		background: transparent;
		border: 0;
		border-radius: 4px;
		box-shadow: none;
		color: #555d66;
		display: flex;
		filter: none;
		height: 22px;
		justify-content: center;
		position: absolute;
		inset-inline-end: 0;
		opacity: 0.7;
		cursor: pointer;
		width: 22px;

		&:hover,
		&:focus,
		&:active {
			background: var( --jeo-discovery-action-hover-bg, transparent );
			box-shadow: none;
			color: var( --jeo-discovery-action-hover-color, #{$primary} );
			filter: none;
			opacity: 1;
			outline: none;
		}

		svg {
			width: 10px;
		}
	}

	&.dragged {
		cursor: grabbing;
	}
}

.daterangepicker {
	.start-date,
	.end-date {
		&.active {
			&,
			&:hover {
				background-color: $primary;
			}
		}
	}

	button {
		background: none;
		text-transform: none;
		padding: 0;
		font-weight: 400;
		text-decoration: none;
		color: #555d66;

		&:hover {
			text-decoration: none;
		}
	}
}


.scroll-bar-style {
	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-button {
		width: 0px;
		height: 0px;
	}

	&::-webkit-scrollbar-thumb {
		background: #ddd;
		border: 0px none white;
		border-radius: 3px;

		&:hover {
			background: #b1b1b1;
		}

		&:active {
			background: #b1b1b1;
		}
	}

	&::-webkit-scrollbar-track {
		background: #eee;
		border: 0px none #ffffff;
		border-radius: 0px;

		&:hover {
			background: rgba( 0, 0, 0, 0.05 );
		}

		&:active {
			background: #eee;
		}
	}

	&::-webkit-scrollbar-corner {
		background: transparent;
	}
}

.discovery-mobile-warning  {
	display: none;
}

@media (max-width: 820px) {
	.discovery-mobile-warning {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #fbfbfb;
		justify-content: center;
		padding: 0 30px;

		h1 {
			text-transform: uppercase;
			font-weight: bold;
			font-size: 60px;
			margin: 0;
			text-align: inline-start;
		}

		h4 {
			margin: 0;
			padding: 23px 0;
			padding-top: 10px;
		}

		a {
			text-decoration: none;
			color: $primary;
		}
	}

	#discovery {
		display: none;
	}
}

.embed-footer {
    position: absolute;
    bottom: 0;
	width: 100%;
	height: 35px;
    background: #242424;
    padding: 5px;
	inset-inline-start: 0px;
	display: flex;
	justify-content: center;
	align-items: center;

	img {
		height: 30px;
	}

	&.discovery {
		inset-inline-start: 0;
		bottom: 0;
	}
}