/* Wrapper */
.betty-share{
  display: flex;
  align-items: center;
  gap: var(--betty-gap);
  flex-wrap: wrap;
}

/* Label */
.betty-share__label{
  font: var(--heading-sm);
  line-height: 1;
  white-space: nowrap;
}

/* Icon container */
.betty-share__items{
  display: flex;
  align-items: center;
  gap: var(--betty-gap);
}

/* Buttons */
.betty-share__btn{
  display: inline-flex;
    position: relative;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
/* Tooltip */
.betty-share__btn::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 10;
}

.betty-share__btn:hover::after{
  opacity: 1;
}
/* Remove accidental background / box */
.betty-share__btn img{
  display: block;
}

/* Icon sizing */
.betty-share__icon{
  width: 18px;
  height: 18px;
}

/* Slightly larger email */
.betty-share__btn--email .betty-share__icon{
  width: 27px;
  height: 27px;
}

/* Toast */
.betty-share__toast{
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.betty-share__toast.is-visible{
  opacity: 1;
}