{% extends '_layouts/cp' %}
{% set title = 'Settings'|t('app') %}
{% set showHeader = false %}
{% set fullPageForm = true %}
{% do craft.app.view.registerAssetBundle('craft\\web\\assets\\vue\\VueAsset') %}

{#{% dd settings %}#}

{% macro selectLoop (options, value) %}
	{% set hasOptgroups = false %}
	{% for key, option in options %}
		{% if option.optgroup is defined %}
			{% if hasOptgroups %}
				</optgroup>
			{% else %}
				{% set hasOptgroups = true %}
			{% endif %}
			<optgroup label="{{ option.optgroup }}">
		{% else %}
			{% set optionLabel = (option.label is defined ? option.label : option) %}
			{% set optionValue = (option.value is defined ? option.value : key) %}
			{% set optionDisabled = (option.disabled is defined ? option.disabled : false) %}
			<option value="{{ optionValue }}"{% if (optionValue~'') is same as (value~'') %} selected{% endif %}{% if optionDisabled %} disabled{% endif %}>
				{{- optionLabel -}}
			</option>
		{% endif %}
	{% endfor %}
	{% if hasOptgroups %}
		</optgroup>
	{% endif %}
{% endmacro %}
{% macro label (label, instructions, children) %}
	<label class="maps-label">
		<strong>{{ label|t('simplemap') }}</strong>
		<span>{{ instructions|t('simplemap') }}</span>
		{{ children }}
	</label>
{% endmacro %}
{% macro tokenValue (token, key) -%}
	{%- if token is iterable and key in token|keys -%}
		{{- token[key] -}}
	{%- endif -%}
{%- endmacro %}
{% from _self import selectLoop, label, tokenValue %}

{% block content %}
<div v-cloak>
	<input type="hidden" name="action" value="plugins/save-plugin-settings">
	<input type="hidden" name="pluginHandle" value="simplemap">
	{{ redirectInput('maps/settings') }}

	<header class="maps-header">
		<h1>
			{{ svg('@simplemap/icon.svg') }}
			<span>{{ 'Maps'|t('simplemap') }}</span>
		</h1>
		<button>
			Save
		</button>
	</header>

	<section class="maps-map">
		{% for key, label in mapTileOptions if key != '0' and key != '1' %}
			{% set x1 = craft.app.assetManager.getPublishedUrl('@simplemapimages/' ~ (key|replace({'.':'-','/':'-'})) ~ '-1x.jpg', true) %}
			{% set x2 = craft.app.assetManager.getPublishedUrl('@simplemapimages/' ~ (key|replace({'.':'-','/':'-'})) ~ '.jpg', true) %}
			<image-fade-on-load
				src="{{ x1 }}"
				srcset="{{ x1 }} 1x, {{ x2 }} 2x"
				alt="{{ label is iterable ? label.label : label }}"
				:show="mapTiles === '{{ key }}'"
			></image-fade-on-load>
		{% endfor %}

		{% namespace 'settings' %}
		<label class="maps-card maps-style">
			<span>{{ 'Select your map style'|t('simplemap') }}</span>
			<select name="mapTiles" v-model="mapTiles">
				{{ selectLoop(mapTileOptions, settings.mapTiles) }}
			</select>
		</label>

		<div class="maps-card">
			{% set mapTokenIterable = settings.mapToken is iterable %}

			<div v-if="mapTilesSimple && requiresMapToken">
				{% set children %}
					<craft-autosuggest
						name="mapToken"
						value="{{ not mapTokenIterable ? settings.mapToken }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Map Token', 'Add the API key for map tiles service you are using.', children) }}
			</div>
			<div v-if="mapTiles.indexOf('mapkit') > -1">
				{% set children %}
					<textarea
						name="mapToken[privateKey]"
						rows="6"
					>{{ tokenValue(settings.mapToken, 'privateKey') }}</textarea>
				{% endset %}
				{{ label('Private Key', 'Paste the contents of your private key files below (supports env variables).', children) }}

				{% set children %}
					<craft-autosuggest
						name="mapToken[keyId]"
						value="{{ tokenValue(settings.mapToken, 'keyId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Key ID', 'The ID of the key associated with your private key.', children) }}

				{% set children %}
					<craft-autosuggest
						name="mapToken[teamId]"
						value="{{ tokenValue(settings.mapToken, 'teamId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Team ID', 'The team ID that created the key ID and private key.', children) }}
			</div>
			<div v-if="mapTiles.indexOf('here') > -1">
				{% set children %}
					<craft-autosuggest
						name="mapToken[appId]"
						value="{{ tokenValue(settings.mapToken, 'appId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('App ID', 'Your Here app ID.', children) }}

				{% set children %}
					<craft-autosuggest
						name="mapToken[appCode]"
						value="{{ tokenValue(settings.mapToken, 'appCode') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('App Code', 'Your Here app code.', children) }}

				{% set children %}
					<craft-autosuggest
						name="mapToken[apiKey]"
						value="{{ tokenValue(settings.mapToken, 'apiKey') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('API Key', 'Your Here API Key (only required for front-end embed maps).', children) }}
			</div>
		</div>
	</section>

	<section class="maps-settings">
		<div class="maps-card">
			<h2>Geocoding</h2>
			{% set children %}
				<div class="maps-select">
					<select name="geoService" v-model="geoService">
						{{ selectLoop(geoServiceOptions, settings.geoService) }}
					</select>
				</div>
			{% endset %}
			{{ label('Geo Service', 'Select the service to be used for Geocoding.', children) }}

			{% set geoTokenIterable = settings.geoToken is iterable %}

			<div v-if="geoServiceSimple && requiresGeoToken">
				{% set children %}
					<craft-autosuggest
						name="geoToken"
						value="{{ not geoTokenIterable ? settings.geoToken }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Geo Token', 'Add the API key for the geocoding service.', children) }}
			</div>

			<div v-if="geoService.indexOf('mapkit') > -1">
				<div class="field">
					<div class="warning">
						<p style="display:inline-block;vertical-align:top">
							<strong>{{ 'Notice'|t('simplemap') }}</strong><br>
							{{ 'MapKit does not support individual address parts.'|t('simplemap') }}
						</p>
					</div>
				</div>

				{% set children %}
					<textarea
						name="geoToken[privateKey]"
						rows="6"
					>{{ tokenValue(settings.geoToken, 'privateKey') }}</textarea>
				{% endset %}
				{{ label('Private Key', 'Paste the contents of your private key files below (supports env variables).', children) }}

				{% set children %}
					<craft-autosuggest
						name="geoToken[keyId]"
						value="{{ tokenValue(settings.geoToken, 'keyId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Key ID', 'The ID of the key associated with your private key.', children) }}

				{% set children %}
					<craft-autosuggest
						name="geoToken[teamId]"
						value="{{ tokenValue(settings.geoToken, 'teamId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Team ID', 'The team ID that created the key ID and private key.', children) }}
			</div>

			<div v-if="geoService.indexOf('here') > -1">
				{% set children %}
					<craft-autosuggest
						name="geoToken[appId]"
						value="{{ tokenValue(settings.geoToken, 'appId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('App ID', 'Your Here app ID.', children) }}

				{% set children %}
					<craft-autosuggest
						name="geoToken[appCode]"
						value="{{ tokenValue(settings.geoToken, 'appCode') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('App Code', 'Your Here app code.', children) }}
			</div>
		</div>
		<div class="maps-card maps-help">
			<h2>{{ 'Getting API Keys'|t('simplemap') }}</h2>
			<a href="https://cloud.google.com/maps-platform/#get-started" target="_blank" rel="nofollow" :class="{active:~mapTiles.indexOf('google')||~geoService.indexOf('google')}">
				{{ svg('@simplemap/web/assets/svgs/google.svg') }}
				<span>
					<em>{{ 'Google Maps'|t('simplemap') }}</em>
					{{ 'You will need to enable the **Maps JavaScript API** and **Places API** for if using Google for the map tiles, and the **Places API** and **Geocoding API** if you are using it for the Geo service.'|md|striptags('<strong>')|raw }}
				</span>
			</a>
			<a href="https://docs.mapbox.com/help/how-mapbox-works/access-tokens/" target="_blank" rel="nofollow" :class="{active:~mapTiles.indexOf('mapbox')||~geoService.indexOf('mapbox')}">
				{{ svg('@simplemap/web/assets/svgs/mapbox.svg') }}
				<span>
					<em>{{ 'Mapbox'|t('simplemap') }}</em>
					{{ 'You can use the same key for both map tiles and geo service, no configuration needed!'|t('simplemap') }}
				</span>
			</a>
			<a href="https://developer.apple.com/documentation/mapkitjs/setting_up_mapkit_js" target="_blank" rel="nofollow" :class="{active:~mapTiles.indexOf('mapkit')||~geoService.indexOf('mapkit')}">
				{{ svg('@simplemap/web/assets/svgs/apple.svg') }}
				<span>
					<em>{{ 'Apple MapKit'|t('simplemap') }}</em>
					{{ 'We currently only support Apple MapKit for map tiles only.'|t('simplemap') }}
				</span>
			</a>
			<a href="https://developer.here.com/" target="_blank" rel="nofollow" :class="{active:~mapTiles.indexOf('here')||~geoService.indexOf('here')}">
				{{ svg('@simplemap/web/assets/svgs/here.svg') }}
				<span>
					<em>{{ 'Here'|t('simplemap') }}</em>
					{{ 'You can use the same key for both map tiles and geo service, no configuration needed!'|t('simplemap') }}
				</span>
			</a>
		</div>

		<hr>

		<div class="maps-card {{ isLite ? 'disabled' }}">
			<h2>
				IP Geolocation
				<span class="maps-pro">Pro</span>
			</h2>
			{% set children %}
				<div class="maps-select">
					<select name="geoLocationService" v-model="geoLocationService">
						{{ selectLoop(geoLocationOptions, settings.geoLocationService) }}
					</select>
				</div>
			{% endset %}
			{{ label('Geolocation Service', 'Select the service to be used for Geolocating users.', children) }}

			{% set geoLocationTokenIterable = settings.geoLocationToken is iterable %}
			<div v-if="geoLocationSimple && requiresGeoLocationToken">
				{% set children %}
					<craft-autosuggest
						name="geoLocationToken"
						value="{{ not geoLocationTokenIterable ? settings.geoLocationToken }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Geolocation Token', 'Add the API key for the geolocation service.', children) }}
			</div>
			<div v-if="requiresGeoLocationToken && geoLocationService.indexOf('maxmind') > -1">
				{% set children %}
					<craft-autosuggest
						name="geoLocationToken[accountId]"
						value="{{ tokenValue(settings.geoLocationToken, 'accountId') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('Account ID', 'Your MaxMind account ID.', children) }}

				{% set children %}
					<craft-autosuggest
						name="geoLocationToken[licenseKey]"
						value="{{ tokenValue(settings.geoLocationToken, 'licenseKey') }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('License Key', 'Your MaxMind license key.', children) }}
			</div>
		</div>
		<div class="maps-card maps-help">
			<h2>{{ 'Getting Geolocation API Keys'|t('simplemap') }}</h2>
			<a href="https://ipstack.com/product" target="_blank" rel="nofollow" :class="{active:~geoLocationService.indexOf('ipstack')}">
				{{ svg('@simplemap/web/assets/svgs/ipstack.svg') }}
				<span>
					<em>{{ 'ipstack'|t('simplemap') }}</em>
					{{ 'ipstack offer free and paid-for versions of their API.'|raw }}
				</span>
			</a>
			<a href="https://www.maxmind.com/en/geoip2-precision-services" target="_blank" rel="nofollow" :class="{active:~geoLocationService.indexOf('maxmind')}">
				{{ svg('@simplemap/web/assets/svgs/maxmind.svg') }}
				<span>
					<em>{{ 'MaxMind'|t('simplemap') }}</em>
					{{ 'MaxMind offer free lookup database that must be stored locally, and a more accurate paid-for version of their API.'|raw }}
				</span>
			</a>
		</div>

		<hr>

		<div class="maps-card {{ isLite ? 'disabled' }}">
			<h2>
				{{ 'what3words'|t('simplemap') }}
				<span class="maps-pro">Pro</span>
			</h2>

			{% set children %}
				<div class="maps-select">
					<select name="w3wEnabled" v-model="w3wEnabled">
						{{ selectLoop([
							{ label: 'Yes', value: '1' },
							{ label: 'No', value: '' },
						], settings.w3wEnabled ? '1' : '') }}
					</select>
				</div>
			{% endset %}
			{{ label('Enable what3words Integration', '', children) }}

			<div v-if="requiresW3WToken">
				{% set children %}
					<craft-autosuggest
						name="w3wToken"
						value="{{ settings.w3wToken }}"
					></craft-autosuggest>
				{% endset %}
				{{ label('what3words Token', 'Your what3words API key.', children) }}
			</div>
		</div>
		<div class="maps-card maps-help">
			<h2>{{ 'Getting a what3words API Key'|t('simplemap') }}</h2>
			<a href="https://developer.what3words.com/public-api" target="_blank" rel="nofollow" class="active">
				{{ svg('@simplemap/web/assets/svgs/w3w.svg') }}
				<span>
					<em>{{ 'what3words'|t('simplemap') }}</em>
					{{ 'what3words offer a free public API key.'|raw }}
				</span>
			</a>
		</div>
	</section>

	{% endnamespace %}
</div>
{% endblock %}

{% do craft.app.view.registerAssetBundle('craft\\web\\assets\\vue\\VueAsset') %}
{# Note: these are separate purely as a workaround for issues with PHPStorms syntax highlighting :( #}
{% js %}
window.__mapsData = {
	mapTiles: '{{ settings.mapTiles }}',
	geoService: '{{ settings.geoService }}',
	geoLocationService: '{{ settings.geoLocationService }}',
	w3wEnabled: '{{ settings.w3wEnabled ? 1 }}',
};
window.__mapsCraftAutosuggestSuggestions = {{ craft.cp.getEnvSuggestions()|json_encode|raw }};
{% endjs %}
{% js %}
const CraftAutosuggest = {
	props: ['name', 'value'],
	delimiters: ['%{', '}'],
	template: `<div class="autosuggest-container">
		<vue-autosuggest
			:suggestions="filteredOptions"
			:get-suggestion-value="getSuggestionValue"
			:input-props="inputProps"
			:limit="limit"
			@selected="onSelected"
		>
			<template slot-scope="{suggestion}">
				%{suggestion.item.name || suggestion.item}
				<span v-if="suggestion.item.hint" class="light">- %{suggestion.item.hint}</span>
			</template>
		</vue-autosuggest>
	</div>`,
	data () {
		return {
			selected: '',
			filteredOptions: [],
			suggestions: window.__mapsCraftAutosuggestSuggestions || [],
			limit: 5,
			inputProps: {
				initialValue: this.value,
				name: this.name,
				onInputChange: this.onInputChange,
			},
		};
	},
	methods: {
		onInputChange(text) {
			if (text === '' || text === undefined) {
				this.filteredOptions = this.suggestions;
				return;
			}

			text = text.toLowerCase();

			var filtered = [];
			var i, j, sectionFilter, item, name;
			var that = this;

			for (i = 0; i < this.suggestions.length; i++) {
				sectionFilter = [];
				for (j = 0; j < this.suggestions[i].data.length; j++) {
					item = this.suggestions[i].data[j];
					if (
						(item.name || item).toLowerCase().indexOf(text) !== -1 ||
						(item.hint && item.hint.toLowerCase().indexOf(text) !== -1)
					) {
						sectionFilter.push(item.name ? item : {name: item});
					}
				}
				if (sectionFilter.length) {
					sectionFilter.sort(function(a, b) {
						var scoreA = that.scoreItem(a, text);
						var scoreB = that.scoreItem(b, text);
						if (scoreA === scoreB) {
							return 0;
						}
						return scoreA < scoreB ? 1 : -1;
					});
					filtered.push({
						label: this.suggestions[i].label || null,
						data: sectionFilter.slice(0, this.limit)
					});
				}
			}

			this.filteredOptions = filtered;
		},
		scoreItem(item, text) {
			var score = 0;
			if (item.name.toLowerCase().indexOf(text) !== -1) {
				score += 100 + text.length / item.name.length;
			}
			if (item.hint && item.hint.toLowerCase().indexOf(text) !== -1) {
				score += text.length / item.hint.length;
			}
			return score;
		},
		onSelected(option) {
			this.selected = option.item;

			// Bring focus back to the input if they selected an alias
			if (option.item.name[0] == '@') {
				var input = this.$el.querySelector('input');
				input.focus();
				input.selectionStart = input.selectionEnd = input.value.length;
			}
		},
		getSuggestionValue(suggestion) {
			return suggestion.item.name || suggestion.item;
		},
	},
};

const ImageFadeOnLoad = {
	props: ['src', 'srcset', 'alt', 'show'],
	template: `<transition name="fade">
		<img
			:src="src"
			:srcset="srcset"
			:alt="alt"
			loading="lazy"
			@load="onLoaded"
			v-show="loaded && show"
		/>
	</transition>`,
	data () {
		return { loaded: false };
	},
	methods: {
		onLoaded () {
			this.loaded = true;
		},
	},
};

new Vue({
	el: '#content',
	components: {
		'craft-autosuggest': CraftAutosuggest,
		'image-fade-on-load': ImageFadeOnLoad,
	},
	data () {
		return window.__mapsData;
	},
	computed: {
		requiresMapToken () {
			return !(
				this.mapTiles.indexOf('wikimedia') > -1 ||
				this.mapTiles.indexOf('openstreetmap') > -1 ||
				this.mapTiles.indexOf('carto') > -1
			);
		},
		mapTilesSimple () {
			return (
				this.mapTiles.indexOf('mapkit') === -1 &&
				this.mapTiles.indexOf('here') === -1
			);
		},
		requiresGeoToken () {
			return !(
				this.geoService.indexOf('nominatim') > -1
			);
		},
		geoServiceSimple () {
			return (
				this.geoService.indexOf('mapkit') === -1 &&
				this.geoService.indexOf('here') === -1
			);
		},
		requiresGeoLocationToken () {
			return (
				this.geoLocationService !== 'none' &&
				this.geoLocationService.indexOf('lite') === -1
			);
		},
		geoLocationSimple () {
			return (
				this.geoLocationService.indexOf('maxmind') === -1
			);
		},
		requiresW3WToken () {
			return this.w3wEnabled;
		},
	}
});
{% endjs %}

{% css %}
:root {
	--x-pad: 30px;
	--y-pad: 30px;
}

@media only screen and (max-width: 767px) {
	:root {
		--x-pad: 12px;
	}
}

hr {
	display: block;
	width: 100%;
	margin: 0 50px 30px;
	margin: 0 50px var(--y-pad, 30px);
	border-top: 1px solid #D2DBE1;
	opacity: 0.5;
}

[v-cloak] {
	display: none;
}

.fade-enter-active, .fade-leave-active {
	transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
	opacity: 0;
}

#content {
	padding: 0 !important;
	background-color: #EEF5FA !important;
	border: none !important;
}

.maps-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90px;
	padding: 0 30px;
	padding: 0 var(--x-pad, 30px);
}

.maps-header h1 {
	font-size: 0;
	margin-bottom: 0;
}
.maps-header svg {
	position: relative;
	top: -3px;
	width: 30px;
	height: 30px;
	vertical-align: bottom;
	margin-right: 10px;
}
.maps-header span {
	font-size: 32px;
	font-weight: 200;
}
.maps-header button {
	display: inline-block;
	padding: 10px 22px;

	color: #fff;
	font-size: 14px;
	letter-spacing: 0;
	font-weight: 500;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: #EF2F30;
	border: none;
	border-radius: 5px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
	cursor: pointer;

	transition:
		background-color 0.1s ease,
		box-shadow 0.1s ease,
		transform 0.1s ease;
}
.maps-header button:hover {
	background-color: #C82C2D;
}
.maps-header button:active {
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.20);
	transform: translateY(1px);
}

.maps-card {
	background-color: #fff;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.10);
	border-radius: 5px;
}
.maps-card h2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0;
	padding: 25px 30px;

	color: #29323D;
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 0;

	border-bottom: 1px solid #D2DBE1;
}

.maps-pro {
	display: inline-block;
	padding: 5px 10px 5px 12px;

	color: #F22C26;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;

	background-color: rgba(242, 44, 38, 0.20);
	border-radius: 18px;
}
.maps-card.disabled {
	opacity: 1;
}
.maps-card.disabled .maps-label {
	opacity: 0.25;
	pointer-events: none;
}

.maps-map {
	position: relative;
	z-index: 2;
	padding: 30px;
	padding: var(--y-pad, 30px) var(--x-pad, 30px);
	min-height: 561px;
	background-color: #e4edf6;
}
@media only screen and (max-width: 767px) {
	.maps-map {
		padding: 30px 30px 250px;
		padding: var(--y-pad, 30px) var(--x-pad, 30px) 250px;
	}
}
.maps-map img {
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.maps-map .maps-card {
	max-width: 538px;
}
.maps-map .maps-card:not(:last-child) {
	margin-bottom: 10px;
}

.maps-style {
	position: relative;
	display: block;
}
.maps-style:before,
.maps-style:after {
	position: absolute;
	top: 50%;
	right: 21px;
	content: '';
	border: 4px solid transparent;
	border-top: none;
	border-bottom: 7px solid #29323D;
	opacity: 0.5;
	pointer-events: none;
}
.maps-style:before {
	transform: translateY(-10px);
}
.maps-style:after {
	transform: translateY(6px) rotate(180deg);
}
.maps-style span {
	position: absolute;
	top: 14px;
	left: 20px;

	color: #29323D;
	font-size: 13px;
	letter-spacing: 0;

	pointer-events: none;
	opacity: 0.4;
}
.maps-style select {
	width: 100%;
	padding: 32px 40px 13px 20px;
	font-size: 24px;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
}

.maps-label {
	display: block;
	padding: 20px;
	line-height: normal;
}
.maps-label:not(:last-child) {
	border-bottom: 1px solid #D2DBE1;
}
.maps-label strong {
	display: block;
	margin-bottom: 2px;

	color: #29323D;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	opacity: 0.7;
}
.maps-label span {
	display: block;

	color: #29323D;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0;
	opacity: 0.4;
}
.maps-label input,
.maps-label textarea,
.maps-label select {
	width: calc(100% + 40px);
	margin: 7px -20px 0;

	color: #29323D;
	font-size: 16px;
	letter-spacing: 0;
	text-indent: 20px;

	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	resize: none;
}
.maps-label textarea,
.maps-label select {
	padding: 0 20px;
	text-indent: 0;
}
.maps-label textarea {
	width: 100%;
}

.maps-select {
	position: relative;
	display: block;
}
.maps-select:before,
.maps-select:after {
	position: absolute;
	top: 50%;
	right: 0;
	content: '';
	border: 3px solid transparent;
	border-top: none;
	border-bottom: 5px solid #29323D;
	opacity: 0.5;
	pointer-events: none;
}
.maps-select:before {
	transform: translateY(-4px);
}
.maps-select:after {
	transform: translateY(6px) rotate(180deg);
}

.maps-settings {
	position: relative;
	z-index: 3;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 750px;
	margin: -65px auto 0;

	padding: 30px;
	padding: var(--y-pad, 30px) var(--x-pad, 30px);
}

.maps-settings .maps-card {
	width: 100%;
	margin-bottom: 30px;
}

.maps-help {
	background-color: rgba(210, 219, 225, 0.2);
	border: 1px solid #D2DBE1;
	box-shadow: none;
}
.maps-help a {
	display: flex;
	align-items: center;
	padding: 12px 30px;

	color: #29323D;
	font-size: 12px;
	line-height: 1.5em;

	opacity: 0.5;
	transition: opacity 0.15s ease;
}
.maps-help a:hover,
.maps-help a.active {
	text-decoration: none;
	opacity: 1;
}
.maps-help a em {
	display: block;
	margin-bottom: 5px;

	font-size: 16px;
	font-weight: 500;
	font-style: normal;
}
.maps-help h2 + a {
	padding-top: 25px;
}
.maps-help a:last-child {
	padding-bottom: 24px;
}
.maps-help svg {
	width: 30px;
	height: 30px;
	margin-right: 20px;
}
.maps-help span {
	flex-shrink: 9999;
}
{% endcss %}