// Increase z-index for components menu otherwise map hides menu extensions
.dropdown-pane {
  z-index: 1000;
}

#awesome-map {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .loading-spinner {
    z-index: 10000;
    position: absolute;
    right: 50%;
    top: 50%;
  }

  .leaflet-popup-content {
    font: inherit;

    h3 {
      @apply mb-2;
    }

    a {
      @apply text-white;
    }

    .description {
      @apply m-0 px-0 text-sm font-sans text-white;

      p {
        @apply mt-0;
      }

      a {
        @apply underline;
      }

      img,
      iframe {
        max-height: 5em;
      }
    }
  }

  .leaflet-control-layers-list {
    hr {
      margin: 0.5em 0;
    }

    b {
      margin: 1em 0;
      display: block;
    }

    label {
      line-height: 1;
      font-size: 0.8rem;
      margin: 0 0.5em 0.5em;

      i {
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        background-color: var(--primary);
      }
    }

    input {
      margin: 0;
    }
  }

  .map-legend {
    background: rgba(255, 255, 255, 0.8);
    padding: 1em;
    border: 2px solid #bbb;
    border-radius: 4px;
  }

  .awesome_map-title-control {
    display: block;
    cursor: pointer;

    &::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid black;
      border-bottom: 0;
      display: inline-block;
      margin: 0 0 2px 5px;
    }
  }

  .active {
    .awesome_map-title-control::after {
      border-top: 0;
      border-bottom: 5px solid black;
    }
  }
}

.participatory-space__container #awesome-map {
  @apply mt-8 mb-8;
}

#awesome_map- {
  &categories-control {
    display: none;

    label {
      margin-left: 0;
      display: none;

      i {
        margin-left: 0.5em;
        display: inline-block;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        background-color: var(-- primary);
      }

      &.subcategory {
        padding-left: 1em;
      }
    }

    .categories-container {
      display: none;
    }

    &.active {
      .categories-container {
        display: block;
      }
    }
  }

  &hashtags-control {
    display: none;

    label {
      display: inline-block;
      line-height: 1;
      background-color: #f0f0f0;
      border-radius: 5px;
      margin: 0.5rem;
      padding: 0.5rem;

      span {
        margin: 0 0 2px 0.4em;
      }

      input {
        vertical-align: top;
      }
    }

    .awesome_map-toggle_all_tags {
      margin: 0.5rem 1rem;
      font-size: 0.875rem;
    }

    .hashtags-container,
    .awesome_map-toggle_all_tags {
      display: none;
    }

    &.active {
      .hashtags-container,
      .awesome_map-toggle_all_tags {
        display: block;
      }
    }
  }
}