/* =================================================
   eLocalInfo Social Icon System (ANCHOR BASED)
   ================================================= */

.elocal-icon{
  /* USER CONTROLS */
  --size:48px;
  --icon-color:#ffffff;
  --border-width:1.5px;

  width:var(--size);
  height:var(--size);
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:var(--border-width) solid var(--icon-color);
  box-sizing:border-box;
  cursor:pointer;
  transition:.25s ease;

  text-decoration:none; /* remove link underline */
}

/* hover */
.elocal-icon:hover{
  transform:translateY(-2px);
}

/* shapes */
.elocal-icon.circle{
  border-radius:50%;
}

.elocal-icon.square{
  border-radius:12px;
}

/* inner icon (acts like <i>) */
.elocal-icon i{
  width:40%;
  height:14%;
  background:var(--icon-color);
  border-radius:10px;
  display:block;
}

/* color presets */
.elocal-icon.white{
  --icon-color:#ffffff;
}

.elocal-icon.black{
  --icon-color:#000000;
}