.e42-share{
  position:relative;
  display:inline-block;
}

.e42-share__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  cursor:pointer;
  line-height:1;
}

.e42-share__icon{display:inline-flex; align-items:center; justify-content:center;}
.e42-share__icon img{display:block; width:18px; height:auto;}

.e42-share__panel{
  position:absolute;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform-origin: top left;
}

/* Directions */
.e42-share--dir-down .e42-share__panel{ top:calc(100% + 10px); left:0; }
.e42-share--dir-up   .e42-share__panel{ bottom:calc(100% + 10px); left:0; }
.e42-share--dir-right .e42-share__panel{ left:calc(100% + 10px); top:0; }
.e42-share--dir-left  .e42-share__panel{ right:calc(100% + 10px); top:0; }

/* Layout */
.e42-share--layout-vertical .e42-share__panel{
  min-width:180px;
}
.e42-share--layout-horizontal .e42-share__panel{
  min-width:auto;
}

.e42-share__panel{
  background:#fff;
  padding:10px;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.e42-share--layout-vertical .e42-share__panel{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.e42-share--layout-horizontal .e42-share__panel{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px;
}

.e42-share__item{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
  color:inherit;
}

.e42-share__item-icon{display:inline-flex; align-items:center; justify-content:center;}

/* Active */
.e42-share.is-open .e42-share__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Animations */
.e42-share--anim-fade .e42-share__panel{ transform: translateY(0); }
.e42-share--anim-fade.is-open .e42-share__panel{ transition: opacity .25s ease, visibility .25s ease; }

.e42-share--anim-slide .e42-share__panel{ transform: translateY(8px); }
.e42-share--anim-slide.is-open .e42-share__panel{ transform: translateY(0); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }

.e42-share--anim-scale .e42-share__panel{ transform: scale(.98); }
.e42-share--anim-scale.is-open .e42-share__panel{ transform: scale(1); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }

/* Tiny toast for copy */
.e42-share__toast{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  font-size:12px;
  padding:6px 8px;
  border-radius:8px;
  background:#111;
  color:#fff;
  opacity:0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

.e42-share__toast.is-show{
  opacity:1;
  transform: translateY(0);
}

/* For Mobile */
@media (max-width: 768px) {
	.e42-share--layout-vertical .e42-share__panel {
    min-width: 100px;
}
	.e42-share--dir-down .e42-share__panel{
		left:-25px;
	}
	.e42-share__btn{
		gap:5px;
	}
}