/* ============================================================
   WCL MAP PINS
   Retina · Stable · Production
============================================================ */


/* ------------------------------------------------------------
   ROOT PIN
------------------------------------------------------------ */

.wcl-pin{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:auto;

  /* retina stability */
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}


/* ------------------------------------------------------------
   PIN HEAD
------------------------------------------------------------ */

.pin-head{
  width:12px;
  height:12px;
  border-radius:50%;
  position:relative;

  background:currentColor;

  /* GPU snap */
  transform:translateZ(0);

  /* base polish */
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35),
    inset 0 1px 1px rgba(255,255,255,0.35);
}


/* ------------------------------------------------------------
   PIN NEEDLE
------------------------------------------------------------ */

.pin-needle{
  width:2px;
  height:20px;
  margin-top:1px;

  border-radius:1px;

  background:linear-gradient(
    to bottom,
    #e9e9e9 0%,
    #bcbcbc 50%,
    #9a9a9a 100%
  );

  transform:translateZ(0);
}


/* ------------------------------------------------------------
   PIN GLOSS
------------------------------------------------------------ */

.pin-gloss{
  position:absolute;
  top:2px;
  left:3px;

  width:4px;
  height:4px;

  border-radius:50%;

  background:rgba(255,255,255,0.35);
}


/* ------------------------------------------------------------
   TYPES
------------------------------------------------------------ */


/* STORE */

.pin-store{
  color:#2f78c4;
}

.pin-store .pin-head{
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35),
    inset 0 1px 1px rgba(255,255,255,0.35),
    0 0 4px rgba(47,120,196,0.35);
}


/* LOUNGE */

.pin-lounge{
  color:#7b4ce2;
}

.pin-lounge .pin-head{
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35),
    inset 0 1px 1px rgba(255,255,255,0.35),
    0 0 4px rgba(123,76,226,0.35);
}


/* STORE + LOUNGE */

.pin-split .pin-head{
  background:linear-gradient(
    135deg,
    #2f78c4 0%,
    #2f78c4 45%,
    #7b4ce2 55%,
    #7b4ce2 100%
  );

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 1px 2px rgba(0,0,0,0.35),
    inset 0 1px 1px rgba(255,255,255,0.35),
    0 0 4px rgba(100,90,210,0.35);
}


/* ------------------------------------------------------------
   HOVER
------------------------------------------------------------ */

.wcl-pin:hover .pin-head{
  transform:scale(1.18) translateZ(0);
  transition:transform .12s ease;
}