/* Shared typed point icons for roadbooks, aid stations and maps. */
:root {
  --tp-point-icon-start-bg: #16a34a;
  --tp-point-icon-complete-bg: #f97316;
  --tp-point-icon-water-bg: #2563eb;
  --tp-point-icon-passage-bg: #db2777;
  --tp-point-icon-finish-bg: #111827;
  --tp-point-icon-fg: #ffffff;
  --tp-point-icon-ring: rgba(255, 255, 255, .96);
  --tp-point-icon-shadow: 0 2px 8px rgba(15, 23, 42, .28);
  --tp-point-icon-active-shadow: 0 0 0 4px rgba(249, 115, 22, .22), 0 8px 20px rgba(15, 23, 42, .26);
}

.tp-point-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  border: 2px solid var(--tp-point-icon-ring);
  border-radius: 999px;
  background: var(--tp-point-icon-passage-bg);
  color: var(--tp-point-icon-fg);
  box-shadow: var(--tp-point-icon-shadow);
  vertical-align: middle;
  overflow: hidden;
}

.tp-point-icon__glyph {
  width: 15px;
  height: 15px;
  display: block;
  background: currentColor;
  transform: translateZ(0);
  -webkit-mask: var(--tp-point-icon-mask) center / contain no-repeat;
  mask: var(--tp-point-icon-mask) center / contain no-repeat;
}

.tp-point-icon--start {
  background: var(--tp-point-icon-start-bg);
  --tp-point-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.4v13.2c0 .8.9 1.3 1.6.9l9.3-6.6c.6-.4.6-1.3 0-1.8L9.6 4.5C8.9 4.1 8 4.6 8 5.4Z'/%3E%3C/svg%3E");
}

.tp-point-icon--complete {
  background: var(--tp-point-icon-complete-bg);
  --tp-point-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 3.2h1.9v6.6h1.4V3.2h1.9v6.6H13V3.2h1.9v7.1c0 2-1.2 3.7-3.1 4.3V21H9.4v-6.4c-1.8-.6-3-2.3-3-4.3V3.2Zm10.8 0h1.5V21h-2.3v-6.7c-1.5-.6-2.5-2.2-2.5-4.1 0-2.6 1.2-5.1 3.3-7Z'/%3E%3C/svg%3E");
}

.tp-point-icon--water {
  background: var(--tp-point-icon-water-bg);
  --tp-point-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 6.8 9.8c-1.1 1.5-1.6 2.9-1.6 4.4 0 4 3 7.1 6.8 7.1s6.8-3.1 6.8-7.1c0-1.5-.5-2.9-1.6-4.4L12 2.6Zm0 16.1c-2.2 0-4-1.8-4-4 0-.6.5-1.1 1.1-1.1s1.1.5 1.1 1.1c0 1 .8 1.8 1.8 1.8.6 0 1.1.5 1.1 1.1s-.5 1.1-1.1 1.1Z'/%3E%3C/svg%3E");
}

.tp-point-icon--passage {
  background: var(--tp-point-icon-passage-bg);
  --tp-point-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8a7.2 7.2 0 0 0-7.2 7.2c0 5 7.2 11.2 7.2 11.2S19.2 15 19.2 10A7.2 7.2 0 0 0 12 2.8Zm0 9.8a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4Z'/%3E%3C/svg%3E");
}

.tp-point-icon--finish {
  background: var(--tp-point-icon-finish-bg);
  --tp-point-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h2v18H5V3Zm3 1h11v10H8V4Zm0 2v2h2V6H8Zm4 0v2h2V6h-2Zm4 0v2h3V6h-3ZM10 8v2h2V8h-2Zm4 0v2h2V8h-2Zm-6 2v2h2v-2H8Zm4 0v2h2v-2h-2Zm4 0v2h3v-2h-3Z'/%3E%3C/svg%3E");
}

.is-next .tp-point-icon,
.tp-point-icon.is-active,
.tp-maplibre-aid-marker-wrap.is-active .tp-point-icon {
  transform: scale(1.08);
  box-shadow: var(--tp-point-icon-active-shadow);
}


.tp-point-icon--dropbag .tp-point-icon__glyph::before { content: "🎒"; }
.tp-point-icon--assistance .tp-point-icon__glyph::before { content: "👤"; }
.tp-point-icon--dropbag_assistance .tp-point-icon__glyph::before { content: "🎒"; }