.whp-trackings-marker {
  --drive-status--driving--color: #1976d2;
  --drive-status--paused--color: #2b9130;
}

.whp-trackings-marker > svg {
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.8));
}

.whp-trackings-marker.whp-trackings-marker--location-car > svg .bg {
  fill: #f8f8ff;
}

.whp-trackings-marker.whp-trackings-marker--location-car > svg .marker-bg {
  fill: #1976d2;
}

.whp-trackings-marker.whp-trackings-marker--location-coffee > svg .marker-bg {
  fill: #2b9130;
}

.whp-trackings-marker.whp-trackings-marker--location-car > svg .marker-content {
  fill: #f8f8ff;
}

.x-leaflet--location-user--popup {
  width: 280px;

  & > .leaflet-popup-content-wrapper {
    padding: 18px 24px 12px 13px;
  }

  & > .leaflet-popup-content-wrapper > .leaflet-popup-content {
    margin: 0 !important;
  }
}

.x-leaflet--location-user--popup .leaflet-popup-close-button {
  top: 1px !important;
  right: 3px !important;

  &:hover {
    background-color: rgb(192, 50, 50);
    border-radius: 100%;

    & span {
      color: white;
    }
  }
}

/*******************************************************************************
 * 地図上のマーカーの強調表示設定
 ******************************************************************************/

/* パルスによる強調表示 (赤)
 *
 * 1.5s だと少し遅く, 1.2s だとはやく感じたため 1.25s (または 1.3s) に設定する
 */
.whp-trackings-marker.pulse {
  border-radius: 50%;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 40, 40, 0.5);
    animation: pulse 1.3s infinite;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.whp-trackings-marker.dimmed {
  /* 逆強調 */
}