.leaflet-container {
  position: absolute;
  z-index: 0;

  .leaflet-popup {
    filter: var(--drop-shadow);
    margin-bottom: calc(var(--pin-width) * 1.5 + 20px);

    .leaflet-popup-content-wrapper {
      border-radius: 3px;
      box-shadow: none;

      .leaflet-popup-content {
        margin: 30px;
      }
    }

    a.leaflet-popup-close-button {
      color: inherit;
      width: auto;
      height: auto;
      padding: 10px;
      margin-top: 15px;
      margin-right: 15px;
      border-radius: 100px;
      transition: background-color 0.2s;

      &:hover,
      &:focus {
        background: rgba(0, 0, 0, 0.2);
        color: inherit;
      }
    }
  }

  .leaflet-popup-tip {
    box-shadow: none;
  }

  .leaflet-control-container .leaflet-control-attribution {
    background: var(--color-background);

    a {
      color: var(--color-primary);
    }
  }

  .leaflet-marker-icon {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;

    .pin {
      display: block;
      margin-left: calc(-1 * var(--pin-width) / 2);
      margin-top: calc(-1 * var(--pin-width) * 1.5);
      position: relative;
      width: var(--pin-width);

      &::before {
        background: var(--color-background);
        border-radius: 100%;
        content: "";
        position: absolute;
        width: calc(var(--pin-width) / 2);
        height: calc(var(--pin-width) / 2);
        top: calc(var(--pin-width) / 4);
        left: calc(var(--pin-width) / 4);
      }

      svg {
        height: auto;
        width: 100%;

        path {
          fill: var(--color-primary);
        }
      }
    }
  }
}
