/* Container */
.gr-share-icons{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Knapper som runde kvadrater */
.gr-share-btn{
  all:unset;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:8px;
  background:#e85b6b;
  color:#fff;
  cursor:pointer;
  line-height:0;
  text-decoration:none;
  box-sizing:border-box;
}

/* Ens udtryk i alle tilstande */
.gr-share-btn:link,
.gr-share-btn:visited,
.gr-share-btn:hover,
.gr-share-btn:active,
.gr-share-btn:focus,
.gr-share-btn:focus-visible{
  background:#e85b6b !important;
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none;
}

/* Ikon */
.gr-share-btn i{
  font-size:18px;
  width:1em;
  height:1em;
  display:block;
  text-align:center;
  pointer-events:none;
}

/* Hover og fokus */
.gr-share-btn:hover{ filter:brightness(.95); }
.gr-share-btn:focus-visible{ outline:2px solid rgba(0,0,0,.25) !important; outline-offset:2px; }

/* Tooltip til kopi knap */
.gr-share-btn[data-tooltip]{ position:relative; }
.gr-share-btn[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  background:#1f2937;
  color:#fff;
  padding:5px 7px;
  border-radius:6px;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:5;
}
.gr-share-btn[data-tooltip]::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:#1f2937;
  opacity:0;
  transition:opacity .18s ease;
  z-index:5;
}
.gr-share-btn.is-tooltip::after,
.gr-share-btn.is-tooltip::before{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* iOS og Safari */
button.gr-share-btn{ appearance:none; -webkit-appearance:none; }
@media (prefers-color-scheme: dark){
  .gr-share-btn:focus-visible{ outline-color:rgba(255,255,255,.35) !important; }
}