/* ==========================================================
   LINKCARDS - COMPONENTE COMPARTIR
   Archivo: /m/Builder/elements/css/lc-share.css
========================================================== */

.lc-share-component{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    z-index:999999;

    margin-left:15px;
    margin-top:15px;
}

/* BOTÓN PRINCIPAL */

.lc-share-trigger{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:#111111;
  color:#ffffff;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(0,0,0,.18);
  transition:transform .2s ease, background-color .2s ease;
}

.lc-share-trigger:hover,
.lc-share-trigger:focus{
  background:#6a762d;
  color:#ffffff;
  outline:none;
  transform:scale(1.05);
}

.lc-share-trigger i{
  font-size:20px;
  line-height:1;
}

/* PANEL VERTICAL */

.lc-share-options{
  position:absolute;
  top:62px;
  left:50%;
  display:flex;
  flex-direction:column;
  gap:9px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-8px);
  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease;
}

.lc-share-component.lc-share-is-open .lc-share-options{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}

/* BOTONES DE REDES */

.lc-share-option{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:#111111;
  color:#ffffff;
  text-decoration:none!important;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .2s ease, background-color .2s ease;
}

.lc-share-option:hover,
.lc-share-option:focus{
  color:#ffffff;
  text-decoration:none!important;
  outline:none;
  transform:scale(1.08);
}

.lc-share-option i{
  font-size:18px;
  line-height:1;
}

/* COLORES */

.lc-share-whatsapp:hover{
  background:#25d366;
}

.lc-share-facebook:hover{
  background:#1877f2;
}

.lc-share-telegram:hover{
  background:#229ed9;
}

.lc-share-linkedin:hover{
  background:#0a66c2;
}

.lc-share-pinterest:hover{
  background:#e60023;
}

.lc-share-email:hover{
  background:#6a762d;
}

.lc-share-copy:hover{
  background:#555555;
}

.lc-share-native:hover{
  background:#6a762d;
}

/* MENSAJE DE CONFIRMACIÓN */

.lc-share-message{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:9999999;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  padding:10px 18px;
  border-radius:24px;
  background:#111111;
  color:#ffffff;
  font-size:13px;
  white-space:nowrap;
  transform:translate(-50%,12px);
  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.lc-share-message.lc-share-message-show{
  visibility:visible;
  opacity:1;
  transform:translate(-50%,0);
}

/* MÓVIL */

@media(max-width:767px){

  .lc-share-trigger{
    width:48px;
    height:48px;
  }

  .lc-share-trigger i{
    font-size:18px;
  }

  .lc-share-options{
    top:56px;
  }

  .lc-share-option{
    width:41px;
    height:41px;
  }

  .lc-share-option i{
    font-size:17px;
  }
}