/* global styling */
.leaflet-control-geosearch *,
.leaflet-control-geosearch *:before,
.leaflet-control-geosearch *:after {
  box-sizing: border-box;
}

/* leaflet button styling */
.leaflet-control-geosearch .leaflet-bar-part {
  border-radius: 4px;
  border-bottom: none;
}

.leaflet-control-geosearch a.leaflet-bar-part:before,
.leaflet-control-geosearch a.leaflet-bar-part:after {
  position: absolute;
  display: block;
  content: '';
}

/* magnifying glass */
.leaflet-control-geosearch a.leaflet-bar-part:before {
  top: 17px;
  left: 15px;
  width: 6px;
  border-top: 2px solid var(--geosearch-icon);
  transform: rotateZ(45deg);
}

.leaflet-control-geosearch a.leaflet-bar-part:after {
  top: 10px;
  left: 10px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  border: 2px solid var(--geosearch-icon);
}

/* a custom icon (searchIcon) instead of the magnifying glass */
.leaflet-control-geosearch a.leaflet-geosearch-custom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--geosearch-icon);
}

.leaflet-control-geosearch a.leaflet-geosearch-custom-icon:before,
.leaflet-control-geosearch:not(.pending):not(.error)
  a.leaflet-geosearch-custom-icon:after {
  display: none;
}

.leaflet-control-geosearch .leaflet-geosearch-icon {
  display: flex;
}

.leaflet-control-geosearch .leaflet-geosearch-icon > svg,
.leaflet-control-geosearch .leaflet-geosearch-icon > img {
  width: 16px;
  height: 16px;
}

/* the pending and error icons show instead of it */
.leaflet-control-geosearch.pending .leaflet-geosearch-icon,
.leaflet-control-geosearch.error .leaflet-geosearch-icon {
  display: none;
}

/* resets for pending and error icons */
.leaflet-control-geosearch.error a.leaflet-bar-part:before,
.leaflet-control-geosearch.pending a.leaflet-bar-part:before {
  display: none;
}

.leaflet-control-geosearch.pending a.leaflet-bar-part:after,
.leaflet-control-geosearch.error a.leaflet-bar-part:after {
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
}

/* pending icon */
.leaflet-control-geosearch.pending a.leaflet-bar-part:after {
  content: '';
  border: 2px solid var(--geosearch-icon);
  border-top: 2px solid #f3f3f3;
  animation: spin 1s linear infinite;
}

/* error icon */
.leaflet-control-geosearch.error a.leaflet-bar-part:after {
  content: '!';
  line-height: initial;
  font-weight: 600;
  font-size: 18px;
  border: none;
}

/* search form styling */
.leaflet-control-geosearch form {
  display: none;
  position: absolute;
  top: 0;
  left: 30px;
  border-radius: 0 4px 4px 0;
  background-color: var(--geosearch-background);
  background-clip: padding-box;
  z-index: -1;
  height: auto;
  margin: 0;
  padding: 0 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.leaflet-geosearch-button form.open {
  border-radius: 0 4px 4px 4px;
}
.leaflet-control-geosearch.active form {
  display: block;
}

.leaflet-geosearch-button.active .leaflet-bar-part {
  border-radius: 4px 0 0 4px;
  width: 30px;
}

.leaflet-geosearch-button form {
  max-width: 350px;
}

.leaflet-control-geosearch form input {
  min-width: 200px;
  width: 100%;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  height: 30px;
  border: none;
  border-radius: 0 4px 4px 0;
  text-indent: 8px;
}

/* provider select, left of the input (only with several providers) */
.leaflet-control-geosearch .geosearch-input {
  display: flex;
  align-items: center;
}

.leaflet-control-geosearch .geosearch-input input {
  flex: 1 1 auto;
  min-width: 0;
}

.leaflet-geosearch-button .geosearch-input input {
  min-width: 200px;
}

.leaflet-control-geosearch .provider-select {
  flex: none;
  max-width: 40%;
  height: 22px;
  margin: 0;
  padding: 0 4px;
  border: none;
  border-right: 1px solid var(--geosearch-divider);
  border-radius: 0;
  background-color: var(--geosearch-background);
  color: var(--geosearch-text);
  font-size: 12px;
  cursor: pointer;
}

.leaflet-control-geosearch .provider-select[hidden] {
  display: none;
}

/* the provider of each result when searching all providers */
.leaflet-control-geosearch .results .provider {
  float: right;
  margin-left: 8px;
  color: var(--geosearch-muted);
  font-size: 11px;
}

.leaflet-touch .leaflet-geosearch-bar form {
  border: 2px solid rgba(0,0,0,0.2);
  box-shadow: none;
}

.leaflet-touch .leaflet-geosearch-bar form input {
  height: 30px;
}

/**
 * Colors. The default (light) theme matches .leaflet-control-attribution and
 * .leaflet-control-scale-line. Override the variables for your own colors.
 * color-scheme keeps browsers from darkening the inputs on their own
 */
.leaflet-control-geosearch {
  --geosearch-background: #fff;
  --geosearch-text: #333;
  --geosearch-strong: black;
  --geosearch-muted: #888;
  --geosearch-border: #c6c6c6;
  --geosearch-divider: #ddd;
  --geosearch-hover: #f8f8f8;
  --geosearch-button-hover: #f5f5f5;
  --geosearch-icon: #555;
  color-scheme: light;
  color: var(--geosearch-text);
}

/* theme: 'dark', or 'auto' when the system uses a dark color scheme */
.leaflet-control-geosearch.leaflet-geosearch-theme-dark {
  --geosearch-background: #2b2b2b;
  --geosearch-text: #e8e8e8;
  --geosearch-strong: #fff;
  --geosearch-muted: #a8a8a8;
  --geosearch-border: #555;
  --geosearch-divider: #444;
  --geosearch-hover: #3a3a3a;
  --geosearch-button-hover: #3a3a3a;
  --geosearch-icon: #ddd;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  .leaflet-control-geosearch.leaflet-geosearch-theme-auto {
    --geosearch-background: #2b2b2b;
    --geosearch-text: #e8e8e8;
    --geosearch-strong: #fff;
    --geosearch-muted: #a8a8a8;
    --geosearch-border: #555;
    --geosearch-divider: #444;
    --geosearch-hover: #3a3a3a;
    --geosearch-button-hover: #3a3a3a;
    --geosearch-icon: #ddd;
    color-scheme: dark;
  }
}

/* the search button is styled by Leaflet, themes other than light color it too */
.leaflet-geosearch-theme-dark a.leaflet-bar-part,
.leaflet-geosearch-theme-auto a.leaflet-bar-part {
  background-color: var(--geosearch-background);
}

.leaflet-geosearch-theme-dark a.leaflet-bar-part:hover,
.leaflet-geosearch-theme-auto a.leaflet-bar-part:hover {
  background-color: var(--geosearch-hover);
}

.leaflet-control-geosearch form input {
  color: var(--geosearch-text);
  background-color: var(--geosearch-background);
}

.leaflet-control-geosearch .results {
  background: var(--geosearch-background);
}

.leaflet-control-geosearch .results > * {
  line-height: 24px;
  padding: 0 8px;
  border: 1px solid transparent;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaflet-control-geosearch .results.active {
  padding: 8px 0;
  border-top: 1px solid var(--geosearch-border);
}

.leaflet-control-geosearch .results > .active,
.leaflet-control-geosearch .results > :hover {
  background-color: var(--geosearch-hover);
  border-color: var(--geosearch-border);
  cursor: pointer;
}

/* add missing border to form */
.leaflet-control-geosearch .results.active:after {
  content: '';
  display: block;
  width: 0;
  position: absolute;
  left: -2px;
  bottom: -2px;
  top: 30px;
}

.leaflet-touch .leaflet-control-geosearch .results.active:after {
  border-left: 2px solid rgba(0, 0, 0, .2);
}

/* result list above the input (resultListPosition) */
.leaflet-geosearch-results-above .results {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  border-radius: 4px 4px 0 0;
}

.leaflet-geosearch-results-above .results.active {
  border-top: none;
  border-bottom: 1px solid var(--geosearch-border);
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3);
}

.leaflet-geosearch-results-above .results.active:after {
  display: none;
}

/* animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.leaflet-top .leaflet-geosearch-bar,
.leaflet-bottom .leaflet-geosearch-bar {
  display: none;
}

.leaflet-geosearch-bar {
  position: relative;
  display: block;
  height: auto;
  width: 400px;
  max-width: calc(100% - 120px);
  margin: 10px auto 0;
  cursor: auto;
  z-index: 1000;
}

.leaflet-geosearch-bar form {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  border-radius: 4px;
}

.leaflet-geosearch-bar form input {
  min-width: 100%;
  width: 100%;
}

.leaflet-geosearch-bar .results.active:after {
  opacity: .2;
}

.leaflet-right .leaflet-control-geosearch form {
  right: 28px;
  left: initial;
  border-radius: 4px 0 0 4px;
  border-left: inherit;
  border-right: none;
}

.leaflet-bar-notfound {
  font-style: italic;
}

.leaflet-control-geosearch button.reset {
  color: var(--geosearch-strong);
  font-weight: bold;
  position: absolute;
  line-height: 26px;
  /* at least 24px wide, so it's easy to hit on touch screens */
  min-width: 26px;
  padding: 0 8px;
  right: 0;
  top: 0;
  cursor: pointer;
  border: none;
  text-decoration: none;
  background-color: var(--geosearch-background);
  border-radius: 0 4px 4px 0;
}

.leaflet-touch .leaflet-control-geosearch button.reset {
  line-height: 30px;
}

.leaflet-control-geosearch button.reset:hover {
  background: var(--geosearch-button-hover);
}